vue指令

最新推荐文章于 2024-03-31 22:53:42 发布

detective3

最新推荐文章于 2024-03-31 22:53:42 发布

阅读量259

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_43741946/article/details/103777996

版权

vue 专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<style type="text/css">
			.box {
				width: 300px;
				height: 300px;
				background-color: red;
			}
			.active {
				background-color:blue;
			}
		</style>
	</head>
	<body>
		<div id='app'></div>
		<script type="text/javascript">
			//创建实例化对象
			/* 
				v-if:数据属性对应的值如果为true,则渲染显示，否则不渲染，
					相当于appendChild()和removeChild(),对性能消耗比较严重
				v-text
				v-html
				v-show：数据的显示是通过控制display的值为none|block 
				v-bing:	绑定标签上的的属性（内置的属性或者是自定义的属性）  简写： ：
				v-on : 	绑定点击事件  原生事件名="函数名"  简写 @
				v-for : v-for="(item,index) in menuList"
			 */
			var vm = new Vue({
				el:'#app',
				data:function(){
					return {
						//数据属性
						msg:'指令系统',
						htm:'<div>this is html</div>',
						text:'中华人民共和国',
						isGreen:false,
						menuList:[
							{id:1,name:'拍黄瓜',price:34},
							{id:2,name:'腌黄瓜',price:24},
							{id:3,name:'辣子鸡',price:44}
						],
						person:{
							name:'hello',
							age:'20',
							sex:'男'
						}
					}
				},
				template:`
				<div class='app'>
					<h2>{{ msg }}</h2>
					<p v-text="msg"></p>
					<div v-html="htm"></div>
					<div v-if="true">true</div>
					<div v-if="false">false</div>
					<div v-if="Math.random() > 0.5">随机数大于0.5</div>
					<div class='box' v-bind:class="{active:isGreen}" :aaa="text" v-on:click="handleClick"></div>
					<ul v-for="item in menuList">
						<li>
							<h5>{{item.id}}</h5>
							<span v-text="item.name"></span><br/>
							<span v-text="item.price"></span>
						</li>
					</ul>
					<ul v-for="(value,key) in person">
						<li>{{value}}</li>
					</ul>
				</div>
				`,
				methods:{
					handleClick(e){
						console.log(this);
						this.$data.isGreen=!this.$data.isGreen
					}
				}
			});
			
		</script>
		
	</body>
</html>