Vue中的常用指令!
概念:指令(Directives)是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。
vue 中的指令按照不同的用途可以分为如下 6 大类:
-
内容渲染指令(v-html、v-text)
-
条件渲染指令(v-show、v-if、v-else、v-else-if)
-
事件绑定指令(v-on)
-
属性绑定指令 (v-bind)
-
双向绑定指令(v-model)
-
列表渲染指令(v-for)
v-html
-
v-html(类似 innerHTML)
-
-
使用语法:
<p v-html="intro">hello</p>
,意思是将 intro 值渲染到 p 标签中 -
类似 innerHTML,使用该语法,会覆盖 p 标签原有内容
-
类似 innerHTML,使用该语法,能够将HTML标签的样式呈现出来。
-
实例代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.js Example</title>
</head>
<body><div class="box2"></div><div class="box"></div><div id="app"><div v-html="msg">{{ msg }}</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {msg: `<a href="http://www.baidu.com">欢迎访问sxx</a>`}})</script>
</body>
</html>
点击则会跳转到百度浏览器!
V-show和V-if
V-show
-
作用: 控制元素显示隐藏
-
语法: v-show = "表达式" 表达式值为 true 显示, false 隐藏
-
原理: 切换 display:none 控制显示隐藏
-
场景:频繁切换显示隐藏的场景
V-if
-
作用: 控制元素显示隐藏(条件渲染)
-
语法: v-if= "表达式" 表达式值 true显示, false 隐藏
-
原理: 基于条件判断,是否创建 或 移除元素节点
-
场景: 要么显示,要么隐藏,不频繁切换的场景
示例代码:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.js 示例</title><style>.box {width: 200px;height: 100px;background-color: lightblue;margin: 10px 0;text-align: center;line-height: 100px;}</style>
</head>
<body><div id="app"><div v-show="flag" class="box">我是 v-show 控制的盒子</div><div v-if="flag" class="box">我是 v-if 控制的盒子</div><button @click="toggleFlag">切换 Flag</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>new Vue({el: '#app',data: {flag: false},methods: {toggleFlag() {this.flag = !this.flag;}}});</script>
</body>
</html>
点击toggle flag按钮会切换
flag
的值,并相应地显示/隐藏元素。
V-show底层原理:切换CSS的display:none,来控制显示隐藏
V-if底层原理:根据判断条件控制元素的创建和移除