vue.js|vue中常见的v指令 javascript|前端

常用指令

v-text 设置双标签元素的innerText
v-html 设置双标签元素的innerHTML
v-if 插入或者移除元素(true,插入,false移除)
v-else 保证上方兄弟节点存在v-if || v-else-if
v-if v-else 只会有其一存在
v-show 隐藏或者显示元素
v-model 双向数据绑定（元素必须有value, DOM元素的value与js内存变量的属性绑定）

class结合v-bind使用

变化的属性可以以v-bind的赋变化的值
v-bind:属性名=“表达式||对象”
简写方式 :属性名=“表达式||对象”
设置一个样式三元表达式
设置多个样式对象的形式
对象 {样式名:是否使用bool,样式名:是否使用}

methods和v-on的使 options:
methods 是一个对象,key是函数名，value是函数体
v-on:DOM原生事件=“表达式||函数”
如果调用函数没有参数，()可以省略
简写方式: @事件名=“表达式||函数”
v-for的使用

v-for=“xxxx in items” :key=“index”

总结

数组v-for="(ele,index) in dataArr " :key=“index”
对象v-for="(value,key,index) in dataObj" :key=“index”

【vue.js|vue中常见的v指令】

Document - 锐客网

.app{
width: 500px;
margin: 50px auto;
background: #ccc;
text-align: center;
}
.red{
color: red;
}
.border{
border: 1px solid blue;
}
input{
text-align: center;
}
ul{
padding: 0;
}
li{
list-style: none;
border: 1px solid blue;
}

{{msg}}

{{msg}}