Vue学习笔记(2)-模板语法与v-html

文本:{{ text }}

在html中通过{{}}（双大括号）中可以把Vue对象中的数据插入到网页中。

<div id="app">
    <p>{{username}}</p>
    <button v-on:click="change">点击修改</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            "username": "杰克克"
        },
        methods: {
            change: function(){
                this.username = 'China';
            }
        }
    });
</script>

• 只要Vue对象上对应的值发生改变了，那么html中双大括号中的值也会立马改变。
• 如果在html的{{}}中，第一次渲染完成后，不想要跟着后期数据的更改而更改，那么可以使用v-once指令来实现

<p v-once>{{username}}</p>

html代码:v-html

在Vue对象数据中，或者是后台返回给我们一个段原生的html代码，我们需要渲染出来，那么如果直接通过{{}}渲染，会把这个html代码当做字符串。这时候我们就可以通过v-html指令来实现。

<div id="app">
    <div v-html="code"></div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            "code": "<a href='https://www.baidu.com/'>百度一下，你就知道！</a>"
        }
    });
</script>