指令常作用在Html的标签上，实现对应的功能
1.文本指令
- v-html:将变量代指的字符串通过html代码渲染在页面
- v-text:将变量代指的字符串通过普通文本显示在页面
v-text完成的功能和{{}}是一样的，区别在于v-text是绑定一个标签，而后者是写在标签之间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入vue.js-->
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{info}}</p>
<!-- v-html-->
<p v-html="info"></p>
<!-- v-text-->
<p v-text="info"></p>
</div>
</body>
<script>
new Vue({
// vue管理的区域,所有的vue语法仅在该区域内生效
el: '#app',
data: {
info: '<input type="text">'
}
})
</script>
</html>
效果：
2.事件指令
使用方法：
v-on:事件名称=函数名
当出发对应的事件时，就会执行对应的函数
2.1 click事件
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <!-- 引入vue.js-->
7 <script src="js/vue.js"></script>
8 </head>
9 <body>
10 <div id="app">
11 <button v-on:click="clickHandler">点我看美女</button>
12 <hr>
13 <img v-show="showPic" src="https://img1.baidu.com/it/u=641358881,2844098460&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=727">
14 </div>
15 </body>
16 <script>
17 new Vue({
18 // vue管理的区域,所有的vue语法仅在该区域内生效
19 el: '#app',
20 data: {
21 showPic:false
22 },
23 // 定义函数的位置
24 methods:{
25 clickHandler(){
26 this.showPic = true
27 }
28 }
29 })
30 </script>
31 </html>
View Code
3.属性指令
4.条件指令
- v-show:可以放置布尔值或者表达式，如果为真，则显示对应的标签，否则不显示，所谓的不显示也只是隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入vue.js--> <script src="js/vue.js"></script> </head> <body> <div id="app"> <!-- v-show --> <p v-show="age>=18">已成年</p> <p v-show="age<18">未成年</p> </div> </body> <script> new Vue({ // vue管理的区域,所有的vue语法仅在该区域内生效 el: '#app', data: { age: 20 } }) </script> </html>View Code显示结果：
- v-if:可以放置布尔值或者表达式，如果为真，则显示对应的标签，否则不显示，不显示的标签也不会加载
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!-- 引入vue.js--> 7 <script src="js/vue.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <!-- v-show --> 12 <p v-if="age>=18">已成年</p> 13 <p v-if="age<18">未成年</p> 14 </div> 15 </body> 16 <script> 17 new Vue({ 18 // vue管理的区域,所有的vue语法仅在该区域内生效 19 el: '#app', 20 data: { 21 age: 20 22 } 23 }) 24 </script> 25 </html>View Code
思考：v-show和v-if有什么区别，使用场景又是什么呢？
二者都是根据布尔值来决定是否将标签渲染在页面上，所不同的是v-show不显示的标签也会加载在页面，只是将标签隐藏了，而v-if则将不显示的标签不会加载
如果页面的标签会根据结果经常来回改变，则使用v-show，反之则使用v-if
5.循环指令
标签：vue,20,show,标签,常见,指令,页面 From： https://www.cnblogs.com/victor1234/p/16856201.html