美文网首页
vue的补充

vue的补充

作者: 尤物_1 | 来源:发表于2018-09-25 08:54 被阅读0次

    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>
    ····
    

    相关文章

      网友评论

          本文标题:vue的补充

          本文链接:https://www.haomeiwen.com/subject/iujkoftx.html