直接呈現HTML結構,v-html

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/93a09488-cee3-4af6-864c-651049ee1d48/1564650823800.jpg

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6853b4a1-cf56-4e15-9c00-d42370f68290/1564650845854.jpg

用v-html在要新增的地方加入,可以看到原本的字被取代了

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e096fef0-969f-4b6b-97dd-4abdabf31e14/1564650964013.jpg

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8875a505-f898-41f1-aae8-8545d072b9b3/1564650976453.jpg

任意渲染容易導致XSS攻擊,官方文件,輸入留言訊息不使用。

單次綁定

在要綁定的地方給予v-once值,這樣綁定的目標就只會輸出一次

<div v-text="text" v-once>請將此欄位改為單次綁定</div>

表達式

直接撰寫,在要顯示的地方{{ A + B }}將兩個值串接

var app = new Vue({
	el:'#app',
	data:{
		add:'內湖',
		name:'金城武'
	},
}) //{{ add + name }} 內湖金城武

也可直接用number相加相乘,如果是字串(num:'100',num2:'200';)時相加會便成100200

var app = new Vue({
  el: '#app',
  data: {
    num1:100,
    num2:200,
  },
});
//{{num1 + num2}} == 300
//{{num1 * num2}} == 20000

v-bind給予標籤id

var app = new Vue({
  el: '#app',
  data: {
		htmlID:'HTMLID',
  },
});
<div v-bind:id="htmlID">請綁上ID</div>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2be89461-5007-4aa1-b452-c91abec94323/1564652558805.jpg

disabled動態操作狀態