语法之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>
更多推荐
Vue基本语法之Mustache语法 v-cloak指令
发布评论