Vue常用指令

Posted 2021-01-01 wxhhts

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue常用指令相关的知识，希望对你有一定的参考价值。

引言：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常用指令的主要内容，如果未能解决你的问题，请参考以下文章