引言：vue 的一些常用指令（逐步更新）。
v-if 条件
v-else 与v-if 搭配使用
v-else-if 与v-if 搭配使用
v-show 显示与隐藏
v-for 循环
v-model 双向绑定数据
v-bind 属性绑定 语法糖“ ： ”
v-on 事件 语法糖“ @ ”
v-text读取文本 ps :不能读取html标签
v-html 能读取html标签
v-once 只渲染一次（只执行一次）
v-cloak 防闪烁（解决初始化慢导致页面闪动）
v-pre 把标签内部的元素原位输出，比如无视“{{}}”
Vue 初试，一个商品列表：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue 购物车初试</title> 6 <script type="text/javascript"src="js/vue.js"></script> 7 <style type="text/css"> 8 9 [v-cloack]{ 10 display: none; /*防止屏幕闪动*/ 11 } 12 table{ 13 border: 1px solid greenyellow; 14 border-spacing: 5px; 15 empty-cells: show; 16 } 17 th,td{ 18 padding: 8px 16px; 19 border: 1px solid green; 20 text-align: left; 21 } 22 th{ 23 background-color: #f7f7f7; 24 color: #5c6b77; 25 white-space: nowrap; 26 } 27 .main{ 28 500px; 29 height: 500px; 30 margin: 50px auto; 31 } 32 33 34 </style> 35 </head> 36 <body> 37 <div class="app" v-cloak> 38 <div class="main"> 39 <template v-if="list.length"> 40 <table> 41 <thead> 42 <tr> 43 <th></th> 44 <th>商品名称</th> 45 <th>商品单价</th> 46 <th>购买数量</th> 47 <th>操作</th> 48 </tr> 49 </thead> 50 <tbody> 51 <tr v-for="(item,index) in list"> <!--v-for 循环商品列表--> 52 <td>{{index+1}}</td><!-- 下标从0开始，但是序号从1，所以+1--> 53 54 <td>{{item.name}}</td> <!--商品名字--> 55 56 <td>{{item.price}}</td> <!--商品价格--> 57 58 <td><button @click="red(index)":disabled="item.count===1">-</button> <!--减少商品函数，同时绑定disable属性，如果商品数量==1 时失效--> 59 60 {{item.count}} 61 <button @click="add(index)">+</button> <!--增加商品--> 62 </td> 63 <td> 64 <button @click="rem(index)">移除</button> <!--移除商品--> 65 </td> 66 </tr> 67 </tbody> 68 </table> 69 <div>总价：￥{{totalPrice}}</div> <!--总价--> 70 </template> 71 <div v-else>购物车空</div> 72 </div> 73 </div> 74 <script type="text/javascript"> 75 var app=new Vue({ 76 el:'.app', 77 data:{ 78 list:[ 79 { 80 id:1, 81 name:'iphone7', 82 price:'5000', 83 count:1 84 }, 85 { 86 id:2, 87 name:'ipad', 88 price:'6000', 89 count:2 90 }, 91 { 92 id:3, 93 name:'ip7', 94 price:'600', 95 count:1 96 } 97 ] 98 }, 99 computed:{ 100 totalPrice:function () { 101 var total=0; 102 for (var i=0;i<this.list.length;i++){ 103 var item=this.list[i]; 104 total+=item.price*item.count; 105 } 106 return total.toString().replace(/B(?=(d{3})+$)/g,','); //正则表达式，将总价格以千位输出（每三位添加一个逗号） 107 } 108 }, 109 methods:{ 110 red:function (index) { 111 if (this.list[index].count===1)return; //如果商品数量为1函数停止 ，虽然有上面的disabled控制，但是添加这个可以增加可靠性 112 this.list[index].count--; 113 }, 114 add:function (index) { 115 this.list[index].count++; //增加商品量 116 }, 117 rem:function (index) { 118 this.list.splice(index,1); //移除商 spilce 函数：可删除从 index 处开始的零个或多个元素 119 } 120 } 121 }) 122 </script> 123 </body> 124 </html>
您可以 ： 点击这里查看效果