Mustache-插值操作

目录

1、Mustache语法

2、v-once

3、v-html

4、v-text

5、v-pre

6、v-cloak

 

1、Mustache语法

可以写直接的变量

{{ message }}

还可以写表达式。

{{ firstName + ' ' + lastName }}
{{ counter * 2 }}

2、v-once

表示元素和组件只渲染一次，不会随着数据的改变而改变。

未使用v-once指令之前，对数据进行修改，界面同步更新

<div id="mustache">
    <h2>{{ message }}</h2>
    <h2 v-once>{{ message }}</h2>
</div>

3、v-html

将字符串html解析

<div id="demo">
    <h2 v-html="url"></h2>
</div>

<script>

    let vm = new Vue({
        el:'#demo',
        data:{
            message:'v-html测试',
            url:'<a href="http://www.baidu.com">百度一下</a>',
        }
    });
</script>

4、v-text

和{{ xxxx }}效果一致，但不灵活，一般不使用

<div id="demo">
    <h2>{{message}}</h2>
    <h2 v-text="message"></h2>
</div>

<script>
    let vm = new Vue({
        el:'#demo',
        data:{
            message:'v-text测试',
        }
    });
</script>

5、v-pre

把{{ }}的内容不做解析，直接显示

<div id="demo">
    <h2>{{message}}</h2>
    <h2 v-pre>{{message}}</h2>
</div>
<script>

    let vm = new Vue({
        el: '#demo',
        data: {
            message: 'v-pre测试',
        }

    });
</script>

 

6、v-cloak

在vue解析之前，div中有一个v-cloak属性，

在vue解析之后，div中就没有这个v-cloak属性

一般用不上

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="demo" v-cloak>
    {{ message }}
</div>
<script>
    setTimeout(function () {
        let vm = new Vue({
            el: '#demo',
            data: {
                message: 'v-cloak测试',
            }

        });
    }, 1000)

</script>