码迷,mamicode.com
首页 > 其他好文 > 详细

Vue常用指令

时间:2018-08-25 20:04:34      阅读:323      评论:0      收藏:0      [点我收藏+]

标签:put   set   model   ++   margin   价格   name   this   height   

引言: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-class 类名 v-style 样式 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             width: 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>

 

 您可以 :   点击这里查看效果

 

Vue常用指令

标签:put   set   model   ++   margin   价格   name   this   height   

原文地址:https://www.cnblogs.com/wxhhts/p/9535004.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!