02、Vue-插值操作

01-Mustache语法

应用如下一个例子来示范

<div id="app">
    <h2>{{message}}</h2>
    <h2>{{firstname +' ' + lastname}}</h2>
    <h2>{{firstname}} {{lastname}}</h2>
    <h2>{{count*2}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'hello',
            firstname:'gui',
            lastname:'gethin',
            count:100
        }
    })
</script>

02- v-once指令的使用

v-once指令:该指令后不需要跟任何的表达式。使用该指令后,页面数据只会渲染一次,不会随着数据的变化而更变。
例如:

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2><!--  v-once该指令不需要跟任何表达式-->
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'hello'
        }
    })
</script>

03- v-html指令的使用

v-html指令:该指令后跟一个string类型数据,会将string的html解析出来并渲染到页面
例如:

<div id="app">
   {{message}}
    <h2>{{a}}</h2>
    <h2 v-html="a"></h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'hello',
            a:'<a href="https://www.baidu.com">百度一下</a>'
        }
    })
</script>

04- v-text指令的使用

v-text指令:于mustache比较相似,都是将数据渲染到页面。v-text通常接受一个string类型数据。
例如:

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-text="message">123</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'hello'
        }
    })
</script>

如上例,若使用了v-text,而且h2标签中也有数据,v-text会将h2中的数据给覆盖掉。

05- v-pre指令的使用

v-pre指令:用于跳过这个元素和子元素的编译过程,用于直接显示mustache语法的内容。
例如:

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'hello'
        }
    })
</script>

如上例中,使用v-pre指令的h2标签中的内容将会直接显示出来:

{{message}}

06- v-cloak指令的使用

在编译之前会出现,用于屏蔽掉未编译的mustache的数据;编译之后会自动消失。使用时也是直接放在标签中。

# Vue  

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×