标签：mes pomelo must 属性 isl 用户 分享 过程 box
1、v-if系列
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="../js/vue.min.js"></script> 7 <style> 8 .box{ 9 width:100px; 10 height:100px; 11 background: red; 12 } 13 .box2{ 14 width:100px; 15 height:100px; 16 background: yellow; 17 } 18 .box3{ 19 width:100px; 20 height:100px; 21 background: green; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="app"> 27 <span>隔山打牛</span> 28 <div class="box" v-if="onOff == ‘a‘"></div> 29 <div class="box2" v-else-if="onOff == ‘b‘"></div> 30 <div class="box3" v-else></div> 31 </div> 32 <script> 33 new Vue({ 34 el:‘#app‘, 35 data:{ 36 onOff:‘b‘ 37 } 38 }); 39 </script> 40 </body> 41 </html>
v-if中条件不成立就执行v-else-if中的yellow黄色背景，如果v-else-if也不成立，则执行v-else中的绿色背景
2、v-show
<div id="app"> <div v-show="islo">你好，vue</div> </div>
1 new Vue({ 2 el:‘#app‘, 3 data:{ 4 islo:true 5 } 6 })
上面例子中如果islo为false则display属性为none 隐藏元素
3、v-for
该指令根据遍历数组来进行渲染
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="../js/vue.min.js"></script> 7 </head> 8 <body> 9 <div id="app"> 10 <ul> 11 <li v-for="val in items">{{val}}</li> 12 </ul> 13 <ol> 14 <li v-for="(user,key) in itemObj">{{user.name}}</li> 15 </ol> 16 <div v-for="(val,key,index) in obj" >{{key}}：{{val}}</div> 17 </div> 18 <script> 19 /* 20 val:数组中的每个值，对象每个值 21 key:数据就下标，对象key值 22 index:下标0,1,2 23 */ 24 new Vue({ 25 el:‘#app‘, 26 data:{ 27 items:[‘苹果‘,‘橘子‘,‘香蕉‘,‘草莓‘,‘柚子‘], 28 itemObj:[ 29 {name:‘apple‘}, 30 {name:‘orange‘}, 31 {name:‘banana‘}, 32 {name:‘strawberry‘}, 33 {name:‘pomelo‘}, 34 ], 35 obj:{ 36 id:1, 37 name:‘小明‘, 38 age:22, 39 home:‘太原‘ 40 } 41 } 42 43 }); 44 </script> 45 </body> 46 </html>
4、v-text和v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.min.js"></script> </head> <body> <div id="app"> <span>{{msg}}</span> <p v-text="msg"></p> <p v-html="str"></p> </div> <script> new Vue({ el:‘#app‘, data:{ msg:‘你好，世界‘, str:‘<h2>内容</h2>‘//这里使用v-html，v-text会把<h2>标签也输出来 } }); </script> </body> </html>
5、v-on
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.min.js"></script> <style> </style> </head> <body> <div id="app"> <button @click="add">添加</button> <button @click="rm">删除</button> <ul> <li v-for="(val,key) in arr">{{val}}</li> </ul> </div> <script> new Vue({ el:‘#app‘, data:{ num:0, arr:[] }, methods:{ add(){ this.arr.unshift(++this.num) }, rm(){ if(this.num>0){ this.arr.shift(); this.num --; } } } }); </script> </body> </html>
6、v-bind
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.min.js"></script> <style> .classA{ color:red; } .classB{ color:orange; } </style> </head> <body> <div id="app"> <div :class="classA">绑定class</div> <div :class="{classA:isok}">绑定class的判断</div> <div :class="{classA,classB}">绑定class中数组</div> <div :class="isok?classA:classB">绑定class的三元运算符</div> <div> <input type="checkbox" id="isok" v-model="isok"> </div> </div> <script> new Vue({ el:‘#app‘, data:{ classA:‘classA‘, classB:‘classB‘, isok:true }, }); </script> </body> </html>
7、v-model
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.min.js"></script> <style> .active{ background: red; } </style> </head> <body> <div id="app"> 小黄<input type="checkbox" value="小黄" v-model="arr"> 小蓝<input type="checkbox" value="小蓝" v-model="arr"> 小绿<input type="checkbox" value="小绿" v-model="arr"> {{arr}} </div> <script> new Vue({ el:‘#app‘, data:{ arr:[] }, }); </script> </body> </html>
8、v-once
<span v-once>change:{{msg}}</span><div v-once><h1>comment</h1> <p>{{msg}}</p> </div> <my-component v-once:comment="msg"></my-component><ul> <li v-for="i in list">{{i}}</li> </ul>
上面的例子中，msg,list即使产生改变，也不会重新渲染
9、v-pre
<div id="app"> <!--第一条语句不进行编译--> <span v-pre>{{message}}</span> <span>{{message}}</span> </div>
最终仅显示第二个span的内容
10、 v-cloak
<div id="app" v-cloak> <div> {{message}} </div> </div> <script type="text/javascript"> new Vue({ el:‘#app‘, data:{ message:‘hello world‘ } }) </script>
在页面加载时会闪烁，先显示
<div> {{message}} </div>
然后再显示
<div> hello world! </div>
标签：mes pomelo must 属性 isl 用户 分享 过程 box
原文地址：https://www.cnblogs.com/theblogs/p/10340028.html
