二、一些常用指令

 

一、一般指令的使用

网页加载慢的时候闪烁问题

        v-cloak 

        （加载完成才显示，不会出现代码），需要在style中写上样式

  <style>
   [v-cloak] { display: none;}
  </style>  
 <p v-cloak>{{msg}}</p>

           v-text

默认没有闪烁问题 ,会覆盖标签里面的内容

 <h4 v-text="msg">456</h4>

         v-html

   往标签内插入html代码

 <h4 v-html="msg">456</h4>

        v-bind

   绑定属性的值，冒号里的值当作变量可以加表达式，  缩写形式直接冒号加属性

<input type="button" v-bind:title="msg +'123'"  value="属性" />
//简写
<input type="button" :title="msg"  value="属性" />

   v-bind:class数组样式绑定，可以使用三元表达式绑定样式

<p :class="[flag?'active':'']"></p>

<script>
 var vm = new Vue({
   el:'#app',
   data:{
   flag:true
   }
   })
</script>

使用对象代替三元表达式

<p :class="['ceshi1',{'active':flag}]">123</p>
<script>
 var vm = new Vue({
   el:'#app',
   data:{
   flag:true
   }
   })
</script>

直接使用对象

<p :class="classobj">123</p>
<script>
 var vm = new Vue({
   el:'#app',
   data:{
   flag:0,
   classobj:{red:true,active:true}
   }
   })
</script>

内联样式：

普通

<h1 :style="{color:'red','font-weight':200}">测试测试</h1>

 单个对象和多对象

<h1 :style="styleobj1">测试测试</h1>

<h1 :style="[styleobj1,styleobj2]">测试测试</h1>

<script>
var vm- new Vue({
el:'#app',
data:{
styleobj1:{color:'red','font-weight':200},
styleobj2:{background,'yellow'}
}
})
</script>

 v-model

    可以实现表单和model中的数据双向绑定,同时变化，注意：只能运用再表单元素中

<p>{{msg}}</p>
   <input type="text" v-model="msg" />

     v-for

循环输出列表数据

<div id="app">	
		<p v-for="item in list">{{item.id}}{{item.name}}</p>
		</div>
<script>
	var vm = new Vue({
			el:'#app',
			data:{
				list:[
				{id:1,name:'奔驰',ctime:new Date()},
				{id:2,name:'宝马',ctime:new Date()}
				]
			}
			});
</script>

输出索引项

<p v-for="(item,i) in list">{{i}}{{item.name}}</p>

输出对象

<div id="app">	
		<p v-for="(val,key,i) in user">{{i}}{{key}}{{val}}</p>
		</div>
<script>
	var vm = new Vue({
			el:'#app',
			data:{
				user:{
					id:1,
					name:'托尼，罗达伦',
					gender:'男'	
				},
				list:[
				{id:1,name:'奔驰',ctime:new Date()},
				{id:2,name:'宝马',ctime:new Date()}
				]
			}
			});
</script>

设置循环次数

<div id="app">	
		<p v-for="item in 10">这是第{{item}}次循环</p>
		</div>

v-for中key的使用注意事项：

循环的时候key属性只能用number获取string，必须使用v-bind属性绑定key属性，否则添加元素所勾选的会勾选错误

<div id="app">
			<p>{{id}}{{name}}</p>
			<input type="text" v-model="id" />
			<input type="text" v-model="name" />
			<input type="button" @click="add" value="添加" />
		   <p v-for="item in list" :key="item.id">
            <input type="checkbox"  />
              {{item.id}}======{{item.name}}
           </p>
</div>
<script>
 var vm = new Vue({
   el:'#app',
   data:{
    id:'',
    name:'',
    list:[
     {id:1,name:'历史'},
     {id:2,name:'生物'},
     {id:3,name:'化学'},
     {id:4,name:'地理'}
    ]
   },
   methods:{
    add:function(){
     this.list.unshift({id:this.id,name:this.name})
    }
   },
   })
</script>	

v-if 和v-show

v-if的特点是每次都会删除和创建元素，

v-show的特点是每次不会进行dom的删除和创建操作只是切换了display：none样式，有较高的初始渲染消耗

如果元素涉及到频繁的切换，最好不用v-if

<div id="app">
   <input type="button" @click="flag=!flag" value="改变"/>
   <h3 v-if="flag">这是v-if控制的元素</h3>
   <h3 v-show="flag">这是v-show控制的元素</h3>
   
  </div>

<script>
 var vm = new Vue({
   el:'#app',
   data:{
    flag:true
   },
   methods:{
    toggle(){
     this.flag=!this.flag
    }
   },
   })
</script>

v-if和v-else

<login v-if="flag"></login>
<register v-else="flag"></register>