vue一些关键字

v-bind
  • 给 HTML 元素或者组件动态地绑定一个或多个特性,比如:style、class。
  • 可简写为 :当加上v-bind:之后,它的值classe不是字符串,而是vue实例对应的data.classed的这个变量,使html中属性可以根据绑定的变量变化
  • 当data.classed发生变化的时候,class属性也发生变化,这非常适合用在通过css来实现动画效果的场合,这只是单向变动
  • 使用v-bind可以实现父组件数据传到子组件。
<input type="button" name="" :value="myType + 'v-bind'" :title="msg">
v-on
  • 用于绑定事件监听,用在普通的 HTML 元素上时,只能监听 原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。简写为@
<input type="button" :value="msg" @click="show">
v-for
  • 该指令可用于遍历 数组、对象、数字  
  • 可包括数组中的值和索引,对象数组,对象中的键值对等
 <li v-for='(item, i) in list'>{{ item }}, {{ i }}</li
v-model
  • 主要是用在表单元素中,它实现了双向绑定。同时使用v-bind和v-model中,v-model建立的双向绑定对输入型元素input, textarea, select等具有优先权,会强制实行双向绑定。 
  • v-model用于表单控件以外的标签是不起作用的 

v-if

  • 用于条件判断
                        <el-tag type="success" v-if="scope.row.pay_status==='1'">已付款</el-tag>
                        <el-tag type="danger" v-else>未付款</el-tag>

  

原文地址:https://www.cnblogs.com/kongrui/p/13300113.html