Vue.js常用指令的使用小结

1.数据渲染：v-text、v-html、{{}}

1.1 v-text

详细：更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。

实例：

<div id="app"> <p v-text="message"></p></div><script>  new Vue({    el:'#app',    data: {      message:'Hello World!'    }  });</script>

1.2 {{}} 和上面的v-text效果一样

实例：

<div id="app"> <p>{{message}}</p></div><script>  new Vue({    el:'#app',    data: {      message:'Hello World!'    }  });</script>

1.3 v-html

详细：更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用v-html 组合模板,可以重新考虑通过是否通过使用组件来替代。

注意：在网站上动态渲染任意 HTML 是非常危险的，因为容易导致XSS攻击。只在可信内容上使用v-html，永不用在用户提交的内容上。

实例：

<div id="app"> <p v-html="message"></p></div><script>  new Vue({    el:'#app',    data: {      message:'<h5>hello vue.js</h5>'    }  });</script>

2.条件渲染 控制模板隐藏:v-show 、v-if、v-else

2.1 v-show

用法：根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。

注意： v-show 不支持 <template> 语法

实例：

<div id="app"> <p v-show="isShow">  show </p></div><script>  new Vue({    el:'#app',    data: {      isShow:true    }  });</script>

2.2 v-if

v-show和v-if大体效果相同，不同的是：v-show的元素会始终渲染并保持在DOM中。

用法：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，

将提出它的内容作为条件块。当条件变化时该指令触发过渡效果。

实例：

<div id="app"> <p v-if="isShow">  show </p></div><script>  new Vue({    el:'#app',    data: {      isShow:false    }  });</script>

 2.3 v-else

限制：前一兄弟元素必须有 v-if 或 v-else-if

用法：为v-if 或者v-else-if 添加 “else 块”

<div id="app"> <p v-if="isShow">show</p> <p v-else>hide</p></div><script>  new Vue({    el:'#app',    data: {      isShow:true    }  });</script>

2.4 v-else-if

<div id="app"> <p v-if="type === 'a'">A</p> <p v-else-if="type==='b'">B</p> <p v-else>C</p></div><script>  new Vue({    el:'#app',    data: {      type:'b',    }  });</script>