一、v-html

  1. <div>
  2.   <div v-html="msg"></div>
  3. </div>
  4. <script>
  5.     var vm =  new Vue({
  6.       el:"#app",
  7.       data:{
  8.         msg:"<h1>hello world</h1>"
  9.       }
  10.     })
  11. </script>

二、v-once

只渲染一次,不重新更新视图。

三、v-if v-else-if v-else

四、v-show

如果频繁的去切换DOM使用v-show

五、v-for

六、key的作用为了区分元素

key就是为了给DOM元素一个唯一的标识符

  1. <body>
  2.     <div id="app">
  3.         <div v-if="flag">
  4.             <span>网易云音乐</span>
  5.             <input type="text">
  6.         </div>
  7.         <div v-else>
  8.             <span>qq音乐</span>
  9.             <input type="text">
  10.         </div>
  11.     </div>
  12.     <script>
  13.         var vm = new Vue({
  14.             el:"#app",
  15.             data:{
  16.               flag:true
  17.             }
  18.         })
  19.     </script>
  20. </body>

不加key,input输入框qq的值改变,网易云的输入框应该是没变的切换过去,还是qq的输入框。

nav.gif
解决方案 添加key

  1.    <div id="app">
  2.         <div v-if="flag">
  3.             <span>网易云音乐</span>
  4.             <input type="text" key="wangyi">
  5.         </div>
  6.         <div v-else>
  7.             <span>qq音乐</span>
  8.             <input type="text" key="qq">
  9.         </div>
  10.     </div>

6-1 for-key

  1. <body>
  2.     <div id="app">
  3.         <p v-for="(item,index) of arr"><input type="checkbox">{{item.id}} {{item.name}}</p>
  4.     </div>
  5.     <script>
  6.         var vm = new Vue({
  7.             el:"#app",
  8.             data:{
  9.                 arr:[
  10.                     {id:1,name:"小米"},
  11.                     {id:2,name:"苹果"},
  12.                     {id:3,name:"华为"},
  13.                 ]
  14.             }
  15.         })
  16.     </script>
  17. </body>

不使用key,使用unshift方法添加数组,勾选checkbox会出问题。
key.gif

我选中的是苹果,结果变为小米。因为这里没有添加key,默认选中的是第二个,重新渲染还是第二元素被选中。

七、filters

类似于小程序的中wxs

  1.    <div id="app">
  2.         {{msg | format}}
  3.     </div>
  4.     <script>
  5.         var vm = new Vue({
  6.             el:"#app",
  7.             data:{
  8.                 msg:"99"
  9.             },
  10.             filters:{
  11.                 format(value){
  12.                     return "$"+value
  13.                 }
  14.             }
  15.         })
  16.     </script>

7-1 filters传参

  1. <div id="app">
  2.         {{msg | format("好的")}}
  3.     </div>
  4.     <script>
  5.         var vm = new Vue({
  6.             el:"#app",
  7.             data:{
  8.                 msg:"99"
  9.             },
  10.             filters:{
  11.               //value是mgs  add是format传递过来的参数
  12.                 format(value,add){
  13.                     return "$"+value+add
  14.                 }
  15.             }
  16.         })
  17.     </script>