内置指令
内置指令以 v 开头，用于绑定数据、处理事件、显示/隐藏元素等。
# 1、v-bind
单向绑定解析表达式，可简写为 : xxx
<template>
<div id="root">
<img :src="remoteImage">
<img :src="localImage">
</div>
</template>
<script>
export default {
data() {
return {
remoteImage:"//images.weserv.nl/?url=https://gitee.com/lx376575942/md-images/raw/master/solution.png&w=500&h=400",
localImage:require("@/assets/logo.png")
}
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
结果展示：
# 2、v-model
双向数据绑定，常用于表单元素
<template>
<div class="root">
<input type="text" v-model="name" >
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
name: '张三',
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
结果展示：
# 3、v-for
基于源数据多次渲染元素或模板块
<template>
<div id="root">
<div v-for="item in items" :key="item.id">
{{item.id}}-{{item.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: "张三"},
{ id: 2, name: "李四" },
{ id: 3, name: "王五" },
{ id: 4, name: "赵六" },
{ id: 5, name: "孙七" },
{ id: 6, name: "周八" },
{ id: 7, name: "吴九" },
{ id: 8, name: "郑十" }
],
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
结果展示：
# 4、v-on
绑定事件监听，可简写为@
<template>
<div>
<h1>你的名字:{{name}}</h1>
<button @click="clickMe($event)">点击我</button>
</div>
</template>
<script>
export default {
data() {
return {
name: '张三'
}
},
methods: {
clickMe(e){
console.log(e);
alert("你好,"+this.name+"同学");
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
结果展示:
# 5、v-if
根据表达式的布尔值条件性渲染元素，控制元素是否存在
<template>
<div id="root">
<div v-if="showMessage">Hello, Vue!</div>
<button @click="showHide">显示/隐藏</button>
</div>
</template>
<script>
export default {
data() {
return {
showMessage: true,
};
},
methods:{
showHide(){
this.showMessage = !this.showMessage;
}
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
结果展示:
# 6、v-else
与 v-if 或 v-else-if 一起使用，表示"否则"的情况
<template>
<div id="root">
<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>
<button @click="score+=10">成绩加10</button><br>
<button @click="score-=10">成绩减10</button>
</div>
</template>
<script>
export default {
data() {
return {
score: 60,
};
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
结果展示:
# 7、v-show
根据表达式的布尔值条件性渲染元素，控制元素是否展示
<template>
<div id="root">
<div v-show="isVisible">这个元素始终会被渲染，但可能会根据条件隐藏。</div>
<button @click="isVisible=!isVisible">显示/隐藏</button>
</div>
</template>
<script>
export default {
data() {
return {
isVisible: true,
};
}
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
结果展示:
# 8、v-text
用于更新元素的文本内容。它会替换元素内的所有内容，包括其内部的 HTML 标签
<template>
<div id="root">
<!-- 使用插值表达式 -->
<p>你好,{{ message }}</p>
<!-- 使用 v-text将覆盖"你好" -->
<p v-text="message">你好</p>
<!-- 使用 v-text不会解析其中的 HTML 标签 -->
<p v-text="labe"></p>
</div>
</template>
<script>
export default {
data() {
return {
message: "vue",
labe: "<span>vue</span>",
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
结果展示:
# 9、v-html
将数据作为原始 HTML 渲染到页面上 , 注:这样做有XSS攻击风险,请谨慎使用。
<template>
<div id="root">
<p v-html="labe"></p>
</div>
</template>
<script>
export default {
data() {
return {
labe: "<span>hello,vue</span>",
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
结果展示:
# 10、v-cloak
v-cloak 用于隐藏为编译的内容，直到 Vue 实例编译完成。使用的时候需要在 CSS 中定义一个规则，通常这个规则会将带有 v-cloak 的元素隐藏起来。注意：v-cloak 指令仅适用于浏览器中编译的 vue 代码，如果使用单文件组件，即 .vue 文件，那么 v-cloak 指令将不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-cloak 示例</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h1>{{ message }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
}
});
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
# 11、v-once
v-once 所在的元素初次动态渲染后，将不会随着数据的变化而重新渲染。
<template>
<div id="app" >
<h1>{{ n }}</h1>
<h1 v-once>{{ n }}</h1>
<button @click="n++">n+1</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
n: 1
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
结果展示:
# 12、v-pre
这些元素和插值将被视为静态文本，不会被 Vue.js 解析。这在需要显示原始文本内容而不需要 Vue.js 处理时很有用。
<template>
<div id="app" >
<h3 v-pre>v-pre示例</h3>
<h3 v-pre>{{ message }}</h3>
<button v-pre >{{ message }}</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'v-pre示例'
};
},
};
</script>
<style scoped>
#app {
margin-left: 100px;
margin-top: 10px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
结果展示：
上次更新: 2024/05/24, 16:24:13
