vue的基础指令

44 阅读1分钟

vue的基础指令

  • v-text==>相当于innerText
    <h1 v-text="msg"></h1> //msg是变量
  • v-html ==>相当于innerHTML
    <h1 v-html="name"></h1>
  • v-pre 使当前节点跳过预编译 {{}}在vue中是关键字,这里就没有编译直接显示在桌面
    <h1 v-pre>{{msg1}}</h1>
  • 在data数据加载完成时节点的v-cloak属性会被删除,可以解决闪烁问题
    <div v-cloak>{{msg2}}</div>
    <div id="app">{{name}}已经{{age}}岁了</div>
    <script>
        var vm = new Vue({
            // 选择元素
            el: "#app",
            data: {
                name: "sehun",
                age: 18
            }
        })
    </script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <div id="app1">
        <!-- v-text==>相当于innerText -->
        <h1  v-text="msg"></h1>
            <!-- v-html ==>相当于innerHTML -->
        <h1 v-html="name"></h1>
        <!-- v-pre 使当前节点跳过预编译 {{}}在vue中是关键字,这里就没有编译直接显示在桌面-->
        <h1 v-pre>{{msg1}}</h1>
        <!-- 在data数据加载完成时节点的v-cloak属性会被删除,可以解决闪烁问题 -->
        <div v-cloak>{{msg2}}</div>
    </div>
    <script>
        var vm1 = new Vue({
            el: "#app1",
            data: {
                name: "lay",
                msg:"perfect",
                msg1:"cute",
                msg2:"sheep"
            }
        })
    </script>

image.png