Vue

Vue学习一(v-cloak,v-text,v-html,{{ 插值表达式 }})

Vue学习之(v-cloak,v-text,v-html,{{ 插值表达式 }})

一、插值表达式

<div id="app"> <span>{{ msg }}</span> </div>
var vm = new Vue({
    el : '#app',
    data : {
        msg : 'welcome study vue'
    }
})
//此时输出"weclome study vue"

二、v-cloak

<style>
    [v-cloak]
    {
        display:none;
    }
</style>
<div v-cloak> <span>{{ msg }}</span> </div>
var vm = new Vue({
    el : '#app',
    data : {
        msg : 'welcome study vue'
    }
})
//此时输出"weclome study vue"

三、v-text

  1. v-text与插值表达式实现的结果是一样的。
  2. v-text输出的值会替换掉整个元素
  3. {{ msg }} 插值表达式不会替换整个元素
<div id="app"> <span v-text="msg">===  ===</span> </div>
var vm = new Vue({
    el : '#app',
    data : {
        msg : 'welcome study vue'
    }
})
//此时输出"weclome study vue"

四、v-html

  1. v-html会输出html内容。与上述一致,代码略过。
微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

支付宝扫一扫,向我赞赏

回复

This is just a placeholder img.