指令


 

v-html="title">

   v-html指令(把值当html去渲染,可以渲染标签等)

v-bind : href=" link" >{{text}}    v-bind 绑定属性  

: href=" link" >{{text}}  v-bind 绑定属性 简写

v-bind:class="{ee:true}">{{dis}}
    v-bind 其他写法  
v-bind:style="{background:color}">{{dis}}
  v-bind 其他写法 其中color要用变量从vue的data那里取的

v-bind:class="{red:color}">我是谁

 v-bind 绑定class的写法 red是id的样式也可以是data里面的变量

链接地址: v-model="link">   v-model双向绑定link值变化input的值也跟着变化,input框变化绑定link值也变化

v-on:click="addProduct()">添加   v-on绑定事件 (这里示范是点击click 可以换其他动作)

      v-on绑定事件 简写

v-if="link.length===0">没有商品   v-if判断元素是否需要渲染 (v-if-else)

 v-else-if="link.length===1">异常商品

  v-if判断元素是否需要渲染 (v-if-else)

 v-else>存在商品

   v-else判断元素是否需要渲染 (v-if-else)

v-show="link.length===0">没有商品

   v-show条件满足就展示

v-for="(item,i) in listnum" :key="i">没有商品

   v-for循环遍历指令  i 是下标,方便渲染 ,一般i 是指定数组里面某个唯一的值 参考案例: https://www.cnblogs.com/kaibindirver/p/13258617.html

如果循环时标签里面还有标签用template标签包围,可以减少容器标签产生   https://cn.vuejs.org/v2/guide/list.html#%E5%9C%A8-lt-template-gt-%E4%B8%8A%E4%BD%BF%E7%94%A8-v-for

v-model="title">  v-model实现双向绑定

双向数据绑定的另一种方法 使用 ref

后记:

这个还可以用在样式上