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