指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
1. v-text相当于 元素的innerText()
设置元素的内容,同时会覆盖元素内的内容
2. v-html相当于 元素的innerHTML();
设置元素的内容,同时会覆盖元素内的内容
如果指令获取的数据里面有html标签,会自动解析为html样式
<body>
<!--v-text&v-html -->
<div id="app">
<!-- v-text 不能解析 标签 相当于innerText-->
<p v-text="msg"></p>
<!-- v-html 能够解析标签 -->
<p v-html="msg"></p>
</div>
</body>
</html>
<script src="../vue.js"></script>
<script>
const vm = new new Vue({
el: '#app',
data: {
msg: '<h1>2000</h1>'
}
})
</script>
3. v-show=‘表达式’
可以根据表达式值的真假,来控制页面元素的显示(true)和隐藏(false)控制元素显示和隐藏
本质:就是css的display: block display:none`
<style>
p {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="fn">切换</button>
<p v-show="isShow"></p>
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
fn() {
this.isShow = !this.isShow
}
}
});
</script>
4. v-if:根据表达值的真假,切换元素的显示和移除(操纵dom元素)
v-else-if:如果if表达式不成立,则 判断当前表达式,成立显示元素,否则移除
v-else:如果if不成立,则显示v-else绑定的daom元素。无需表达式
<div id="app">
<ul>
<li v-if='num>11'>离离原上草</li>
<!-- 如果 if 判断成立 不会走下面 相反如果成立 继续执行 继续判断 -->
<li v-else-if='num>10'>一岁一枯荣</li>
<li v-else-if='num>12'>野火烧不尽</li>
<li v-else>春风吹又生</li>
</ul>
<!-- v-show 成立 只是对元素进行一个隐藏和显示 v-if和v-else 成立则是对 元素进行 删除和插入 -->
<p v-show="false">11111111</p>
</div>
<script>
//创建Vue实例,得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
num: 10
},
methods: {}
});
</script>
5. v-if和v-show的区别:
v-if:纯粹的元素插入和删除
v-show:纯粹的css的显示和隐藏
v-if与v-show区别
v-show指令的元素始终会被渲染到HTML
它只是简单地为元素设置CSS的style属性。当不满足条件的元素被设置style="display:none"样式
v-if指令满足条件是,会渲染到html中,不满足条件时,是不会渲染到html中的
v-if 指令有更高的切换消耗
v-if当条件成立的时候会将元素加上,不成立的时候,就会移除dom,并且内部的指令不会执行
v-show 指令有更高的初始渲染消耗
v-show只是简单的隐藏和显示
如果需要频繁切换使用 v‐show 较好,如果在运行时条件不大可能改变 使用v‐if 较好片