vue常用系统指令
1. vue常用的指令有哪此?
v-html相当于innerHtml
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app" > <!-- <h1>{{atag}}</h1> 和v-text指令系统做的是一样的--> <h1 v-text="atag"></h1> <h1 v-html="atag"></h1> <!-- 能够将标签字符串识别成标签效果 --> <!-- <h1 v-text="num"></h1>--> <!-- <h1 v-text="num+1"></h1>--> </div> </body> <script src="vue.js"></script> <script> let vm = new Vue({ el:'#app', data(){ return { atag:'<a href="http://www.baidu.com">百度</a>', num:20, } } }) </script> </html>
2. v-if v-show
vue中提供了两个指令可以用于判断是否要显示元素，分别是v-if和v-show。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app" > <a href="" v-if="num>20">百度1</a> <!-- 动态删除或增加标签,页面渲染开销大 --> <a href="" v-else-if="num<20">百度2</a> 小于20时显示百度2,等于20显示京东 <h1 v-else>京东</h1> <h1 v-show="num>20">show1</h1> <!-- 动态展示或隐藏标签,渲染开销小 --> </div> </body> <script src="vue.js"></script> <script> let vm = new Vue({ el:'#app', data(){ return { num:21, } } // vm.num = 18; 我们发现当num的值被重新赋值时,vue的视图部分(html) ##在浏览器控制台中修改值时,页面会自动发生变化 // 会自动发生变化,这就是数据驱动视图,以后视图的效果都是通过数据来控制的 // vm.num = 20; }) </script> </html>
小结:
v-show后面不能v-else或者v-else-if
v-show隐藏元素时，使用的是display:none来隐藏的，而v-if是直接从HTML文档中移除元素[DOM操作中的remove]
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
