指令
-
使用形式:
- 绑定在dom的属性身上
- 为了区别自定义属性,vue提供的指令都携带 v-
-
数据展示
-
v-html 非转义输出 , 可以解析 xml类型数据
-
v-text
<div id="app"> <h3> 数据展示 </h3> <p> {{ msg }} </p> <p v-html="msg"></p> <p v-text="msg"></p> </div> <script src="../lib/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: '<div> hello Vue.js</div>', } }) </script>
-
-
条件渲染
-
v-if
-
v-else-if
-
v-else
<div id="app"> <p v-if="flag"> 条件 - 单路分支 </p> <h4> 条件渲染 - 双路分支 </h4> <p v-if="flag1"> 条件 - 双路 - 1 </p> <p v-else> 条件 - 双路 - 2 </p> <h4> 条件渲染 - 多路分支 </h4> <p v-if=" type === 'A'"> 条件 - A </p> <p v-else-if="type === 'B'"> 条件 - B </p> <p v-else> 条件 - C </p> </div> <script src="../lib/vue.js"></script> <script> new Vue({ el: '#app', data: { flag: false, flag1: true, type: 'A', } }) </script>
-
-
条件展示
-
v-show
<div id="app"> <p v-show="flag2"> 条件 - 展示 </p> </div> <script src="../lib/vue.js"></script> <script> new Vue({ el: '#app', data: { flag2: false, } }) </script>
-
v-if vs v-show
- v-if是真正的控制dom的存在与否,v-show 是控制dom的display:none属性
- 如果初始条件都为false,v-if会惰性渲染【 不渲染 】,但是v-show不管条件是什么都会渲染,所以v-show的初始渲染开销较高
- 如果我们要频繁的切换flag,那么我们使用谁? 我们使用 v-show , 反之,使用v-if
-