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>