Vue-(四)模板語法

Posted on April 19, 2019 本文总阅读量次

4-1.用括號語法，插入動態的數值或文字 (影片)

1
2
3

<div id="app">
  <span v-once>{{message}}</span>
<div>

new Vue({
  el:"#app",
  data:{
    message:'Hello',
  },
})

第一個”“因為加上v-once，即使按button會執行函式改變message的值，但第二個”“在畫面中，並不會被重新渲染

<div id="app">
  <span v-once>{{message}}</span>
  <br/>
  <span>{{message}}</span>
  <br/>
  <button v-on:click="append">Append</button>
</div>

new Vue({
  el:"#app",
  data:{
    message:'Hello',
  },
  methods:{
    append(){
      this.message += "!";
    },
  }
})

1
2
3

<div id="app">
  <span v-html="message"></span>
</div>

new Vue({
  el:"#app",
  data:{
    message:'<h1 style="color:red;">Hello</h1>'
  },
})

使用v-html的風險：
因為允許使用者輸入的內容包含html，使用者可以故意用 ‘‘，裡面包了挖礦或攻擊程式。
所以使用v-html時，要確保資料來源，資料來源應當是資料庫中的安全內容。

1
2
3

<div id="app">
  <input type="checkbox" v-bind:checked="check_status">
</div>

new Vue({
  el:"#app",
  data:{
    check_status:false,
  },
})

….其他事件

<div id="app">
  <input type="checkbox" v-bind:checked="check_status">
  <button v-on:click="change">Change status</button>
</div>

new Vue({
  el:"#app",
  data:{
    check_status:false,
  },
  methods:{
    change(){
      this.check_status = !this.check_status;
    }
  }
})

表達式：用()括起來會是一個值，就代表它是一個表達式

<div id="app">
  <h1>{{count}}</h1>
  <input type="checkbox" v-bind:checked="(count%2==0)">
  <button v-on:click="add">Add</button>
</div>

new Vue({
  el:"#app",
  data:{
    count:0,
    check_status:false,
  },
  methods:{
    add(){
      this.count += 1;
    }
  }
})

<div id="app">
  <h1>{{count*2}}</h1>
  <button v-on:click="add">Add</button>
</div>

new Vue({
  el:"#app",
  data:{
    count:0,
  },
  methods:{
    add(){
      this.count += 1;
    }
  }
})

<div id="app">
  <span>{{message}}</span>
  <br/>
  <input type="text" v-model="message"/>
</div>

new Vue({
  el:"#app",
  data:{
    message:'',
  },
})

重點釐清