什么是指令系统
- 指令系统是VUE提供的，语法为 v-xx 写在标签属性中的，系统都称之为指令
文本指令
- 文本指定必须写在标签属性上
- 文本指定的值必须为变量，或者表达式
v-xx # 必须是一个标签属性
<p v-text="a_url"></p>
v-xx="变量/静态式"
a-text指令
- 如：a_url必须是data中定义的变量
<div id="app">
<p v-text="a_url"></p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
a_url: '<a href="http://www.baidu.com">点我</a>'
}
})
</script>
渲染结果会把v-text中的内容，渲染到标签内部：
<p>
<a href="www.baidu.com">点我</a>
</p>
# 等同于:
# <p>{{a_url}}</p>
a-html指令
<div id="app">
<p v-text="a_url"></p>
<p v-html="a_url"></p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
a_url: '<a href="http://www.baidu.com">点我</a>'
}
})
</script>
# 把字符串的内容渲染成标签，添加到标签内部
v-show
# 布尔值，定义标签是否显示
# 注意，v-show的值需要是一个变量定义的，在script中定义
# 如果show为false，则此标签会不显示，前台样式为 style="display: none"
<h2>v-show</h2>
<img src="" alt="" v-show="show">
<script>
var vm = new Vue({
el: '#app',
data: {
a_url: '<a href="http://www.baidu.com">点我</a>',
show: true
}
})
</script>
v-if
- 与v-show作用一样，用于指定标签是否显示
- 与v-show方法一样，需要使用变量指定true或者false
- 但是v-if的方法，如果更改变量show为false，则会直接删除整标签，改回为true，则会将标签添加回来
- 效率不如v-show
<h2>v-if</h2>
<img src="xxx" alt="" v-if="show">
<script>
var vm = new Vue({
el: '#app',
data: {
a_url: '<a href="http://www.baidu.com">点我</a>',
show: true
}
})
</script>