vue(三)之数据与文本内容的绑定

插值表达式

插值表达式数据与视图双向绑定，视图会随数据的变化而变化，4种插值表达式如下：

<p>{{ msg }}p>
<p>{{ msg.length }}p>
<p>{{msg + '拼接的字符串'}}p>
<p>{{dlag ? '条件为真' : '条件为假'}}p>

var vm = new Vue({
    //使用id选择器选择需要绑定的元素
    el: '#app',
    //数据层，这就是需要绑定到界面的数据
    data: {
        msg: 'hello world'
    },
})

结果：

v-once属性

代表只渲染一次，之后不会随着数据的改变而改变。

<div id="app">
    <p v-once>{{ msg }}p>
div>

v-html属性

data中的数据如果存在标签，就需要v-html。

<div id="app">
    <p v-html>
        {{url}}
    p>
div>

var vm = new Vue({
  //使用id选择器选择需要绑定的元素
   el: '#app',
   //数据层，这就是需要绑定到界面的数据
   data: {
       url: '
v-html
'
   }
})

v-pre属性

有时候就不需要插值表达式，直接输出{{message}}的内容就需要使用到v-pre属性。

<div id="app">
    <p v-pre>{{ msg }}p>
div>

v-cloak属性

有时候网页渲染过慢，会显示{{msg}}而非数值。这时就要v-cloak属性。

<style>
	[cloak]{
		display:null;
	}
style>
<div id="app" v-cloak>
    <p v-pre>{{ msg }}p>
div>