怀化市网站建设_网站建设公司_Java_seo优化
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底层原理：根据判断条件控制元素的创建和移除