Demo地址
当我们需要动态更改某个属性的值的时候,这里会用到属性绑定
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元素相关的容器元素
data:{//数据存储
name : "allen",
age : 123,
website:'https://www.baidu.com',
websiteId:"<a href='https://www.baidu.com'>website</a>",
},
methods:{
study:function (person) {
return person;
},
click:function () {
alert('hi');
}
}
}
);
</script>
这里可以直接取到website的值.
v-html
v-html可以引入html的元素文本,例如下面引入的就是"<a href='https://www.baidu.com'>website</a>"一个这样的html文本.
<div id="app">
<p v-html="websiteId"></p>
</div>
<script>
var app = new Vue({
el:"#app",//el表示元素,一定是与html元素相关的容器元素
data:{//数据存储
name : "allen",
age : 123,
website:'https://www.baidu.com',
websiteId:"<a href='https://www.baidu.com'>website</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的时候,编译器会有红色的提示,可能会以为出错了.其实这不影响运行结果,代码是起作用的,所以可以忽略这种情况,免得给自己带来困扰.
