vue的补充

v-html:识别标签并且标签里面的内容会加粗

v-text :不能识别标签只能当做文本显示会加粗

v-once:只能绑定一次

v-pre:原样输出

v-once与v-pre只写原样即可

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='app'>
       <input type="text" v-model='msg'>
       <p v-html='msg'>{{msg}}</p>
       <h3 v-text='msg'>{{msg}}</h3>
       
       <a href="" v-once>{{msg}}</a>
       
       <h1 v-pre>{{msg}}</h1>
       
   </div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               msg:'hello'
           }
       })
    </script>
</body>
</html>

v-cloak:这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
HTML 绑定 Vue实例,在页面加载时会闪烁
然后才会出现 加载完成 字样,为了效果更明显,我们可以延后加载 Vue 实例

setTimeout(() => {
new Vue({
el: '#app',
data: {
msg: 'hello'
}
})
},2000)

v-cloak 可以解决这一问题,在 css 中加上

[v-cloak] {
display: none;
}
例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
   <div id='app'>
       <h1 v-cloak>{{msg}}</h1>
   </div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               msg:'hello vue'
           },
           beforeMount:function(){
               alert('beforeMount')
           }
       })
    </script>
</body>
</html>
····
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 以星空,以草地,以音符 以生命,以時間,以情感 以回憶,以希望,以愛 以躍出河面的魚 以腳下奔走的路面 以火車窗外...
    7acques阅读 170评论 1 0
  • 这一天,很忙,也很充实. 早上七点,先后把老公和儿子喊醒,已约好,八点做能力测试. 还好,一切顺利.儿子都很配合,...
    玫瑰铿锵阅读 108评论 0 5
  • 前两头和你聊了一些话,不记得什么时候开始聊天的,但是感觉聊了好久,很奇怪,对你有莫名的好感,一开始有一句没一句的搭...
    病生阅读 245评论 0 0