指令常作用在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