指令
- v-text: innerText
- v-html: innerHTML
- v-if: 是否插入元素 在控制台看不到元素 适用于不频繁切换和权限控制的时候
- v-show: 是否显示元素 在控制台可以看到元素 频繁切换的时候使用
- v-biand: 绑定属性 可以缩写成 ":" 用来绑定class
- v-on: 绑定事件 鼠标事件 可以缩写成 "@"
- v-model: 数据的双向绑定 常用在input框中
- v-for: 遍历数据 遍历后台返回的数据
html部分
<!--v-text和v-html-->
<span v-text="mytext"></span>
<span v-html="myhtml"></span>
<!--v-if 必须相邻dom-->
<button v-if="num === 1">测试v-if</button>
<button v-else-if="num === 2">测试v-else-if</button>
<button v-else="num">测试v-else</button>
<!--v-show-->
<button v-show="isShow">测试isShow</button>
<!--v-bind和v-on-->
<input type="text" v-bind:value="myValue" :file="'xxx'" />
<button v-on:click=" myValue='abc' ">点我改变myValue</button>
<button @click=" myValue='def' ">简写改变myValue</button>
<!--v-model-->
<input type="text" v-model="myValue" />
<button v-show="myValue === 'xxx'">myValue===xxx显示</button>
<!--v-for 遍历 数组和对象-->
<ul>
<li v-for="item in stus" :class="item.myClass">
{{item.name}}
</li>
</ul>
<ul>
<li v-for="(val, key, index) in stus2">
val: {{val}}
key: {{key}}
index: {{index}}
</li>
</ul>
js部分
data () {
return {
mytext: '<h1>我是v-text的值</h1>',
myhtml: '<h1>我是v-html的值</h1>',
isExit: true,
num: 1,
isShow: false,
myValue: '哈哈哈哈哈',
stus: [{name: '张三', myClass: 'a'},{name: '李四', myClass: 'b'},{name: '王五', myClass: 'a'}],
stus2: {
'a': '张三',
'b': '李四',
'c': '王五'
}
}
}
