模板语法(1)

渲染文本

在html中通过{ { }}（双大括号）中可以把Vue对象中的数据插入到网页中。并且只要Vue对象上对应的值发生改变了，那么html中双大括号中的值也会立马改变。

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

当然，如果在html的{ { }}中，第一次渲染完成后，不想要跟着后期数据的更改而更改，那么可以使用v-once指令来实现。示例代码如下

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

渲染原生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>

属性绑定

如果我们想要在html元素的属性上绑定我们Vue对象中的变量，那么需要通过v-bind来实现。比如以下代码是不行的：

<div id="app">
    <img class="{
    {classname}}">你好，世界</p>
</div>
<script>
    let vm = new Vue({
    
        el: "#app"