Vue指令系统

Vue指令系统

1: v-test: innerText
2: v-html: innerHTML
3: v-if: 数据属性对应的值，如果为假不渲染，如果为真则渲染 appendChild()、removeChild();
4：v-show: 控制DOM元素显示隐藏，display:none|block;
项目中如果频繁使用切换，建议使用v-show, 如果运行条件很少改变，则使用v-if,
v-if对页面的内存消耗会很大
例如在导航栏上或者选项卡之类的建议使用v-show,
控制类名对元素显示或者隐藏，display:none|block

5 v-bind: 绑定标签上属性（内置的属性和自定义属性），可以绑定多个属性，
简写（：）；例如： :class=””、:src=””
6 v-on: 原生事件名 = “函数名” 简写：（@）
7 v-for: 遍历对象和数组，优先级最大。

整体案例：

<style>
.box{
width:300px;
height:300px;
background:red;
}
.active{
background:green;
}
</style>

<div id=”app”>
<p v-if=”isShow”>{{msg}}</p>//显示状态
<p v-if=”!isShow”>{{msg}}</p>//不显示状态
//为true 显示，为false隐藏
<p v-if=”Math.random()>0.5”>已显示</p>
<p v-else>已隐藏</p>
<p v-show=”isShow”>显示</p>
<p v-show=”!isShow”>不显示</p>
<p class=”box”v-bind:class=”active:true” v-on:click=”fun”></p>
<ul>
	<li v-for=”(item,index) in menuList”>
		<h5>{{item.name}}</h5>
		<h5 v-text=”item.id”></h5>
	</li>
</ul>
</div>
	
	new Vue({
		el:”app”,
		data:{
			msg:”你好”,
			isShow:true,
			//数组
			menuList:[
				{id:1,name:”电脑”,price:”20”},
				{id:2,name:”鼠标”,price:”20”}
				{id:3,name:”键盘”,price:”20”}	
				],
		},
	methods:{
		//点击事件函数
		fun(){
			do something…
		}
	}
});