Demo地址
當(dāng)我們需要動態(tài)更改某個屬性的值的時候,這里會用到屬性綁定
v-bind
v-bind有兩種寫法:
<div id="app">
<h1>hello {{name}},I'm {{age}}.</h1>
<h1>{{study('math')}}</h1>
//寫法1
<a v-bind:href="website">website</a>
//寫法2
<a :href="website">website</a>
</div>
<script>
var app = new Vue({
el:"#app",//el表示元素,一定是與html元素相關(guān)的容器元素
data:{//數(shù)據(jù)存儲
name : "allen",
age : 123,
website:'https://www.baidu.com',
websiteId:"<a ,
},
methods:{
study:function (person) {
return person;
},
click:function () {
alert('hi');
}
}
}
);
</script>
這里可以直接取到website的值.
v-html
v-html可以引入html的元素文本,例如下面引入的就是"<a 一個這樣的html文本.
<div id="app">
<p v-html="websiteId"></p>
</div>
<script>
var app = new Vue({
el:"#app",//el表示元素,一定是與html元素相關(guān)的容器元素
data:{//數(shù)據(jù)存儲
name : "allen",
age : 123,
website:'https://www.baidu.com',
websiteId:"<a ,
},
methods:{
study:function (person) {
return person;
},
click:function () {
alert('hi');
}
}
}
);
</script>
v-on
v-on是用來綁定點擊事件,有幾種寫法
<div id="app">
<button v-on:click="click">click me</button>
<button @click="click">click him</button>
</div>
...下面代碼省略和上面new vue相同
注意點:
在WS里面手動添加v-bind,v-on的時候,編譯器會有紅色的提示,可能會以為出錯了.其實這不影響運行結(jié)果,代碼是起作用的,所以可以忽略這種情況,免得給自己帶來困擾.
