Vue基本语法之Mustache语法 v-cloak指令

语法之Mustache语法 v-cloak指令"/>

Vue基本语法之Mustache语法 v-cloak指令

Mustache语法

将要绑定的变量、值、表达式括住就可以实现， Vue 将会获取计算后的值，并以文本的形式将其展示出来。

• 文本插值

  <div id="app"><!--mustache语法中，可以直接写变量，也可以写表达式--><h2>{{message}}</h2><h3>{{firstName+lastName}}</h3><h3>{{firstName+'.'+lastName}}</h3><h3>{{counter*3}}</h3>
  </div>
  <script src="../Js/vue.js"></script>
  <script>var app = new Vue({el: '#app',data: {message: '今天天气真好！',firstName: '海罗',lastName: '保恩',counter: 100}})
  </script>
  

• HTML插值

作用：当服务器请求到的数据时一个HTML代码时，我们希望按照HTML格式进行解析，并显示对应的内容。

<div id="app"><!--当url以<a>标签存在时，界面会比较友好--><h2 v-html="url"></h2>
</div>
<script src="../Js/vue.js"></script>
<script>var app = new Vue({el: '#app',data: {message: '今天天气真好！',url: '<a href="/">百度一下</a>'}})
</script>

v-cloak指令

相当于斗篷，解析前，存在属性v-cloak，解析后，没有属性v-cloak了

<style>[v-cloak]{display: none;}</style><div id="app" v-cloak>{{message}}</div>
<script src="../Js/vue.js"></script>
<script>//在Vue解析前，div中有属性v-cloak//在vue解析后，div中没有属性v-cloaksetTimeout(function () {var  app=new Vue({el:'#app',data:{message:'今天天气真好！'}})},2000)
</script>