v-bind单向绑定,是把数据传到html,v-bind:href可以简写为 :href
v-model属性双向绑定,可以把数据传到input中,同时在input中进行改动时,js中也会同步获取数据this.name
需要注意这些后面可以加些修饰符
- lazy 相当于监听change操作,只有在失去焦点的时候,才会进行数据绑定了(v-bind.lazy)
- number v-model默认是string类型,可以通过.number方式确保获取到的是数字类型(v-model.number)
- trim 去掉前后的空白(v-model.trim)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="div1">
<a v-bind:href="page">bing</a>
<!-- v-bind:href简写是 :href -->
<a :href="page">bing</a>
</div>
<div id="div2">
<!--v-model.lazy相当于监听change操作,只有在失去焦点的时候,才会进行数据绑定了
v-model.trim去掉前后的空白-->
昵称:<input v-model.lazy='name' placeholder="输入昵称" type="text" />
<br><span>{{name}}</span>
<button @click="getNumber()">获取数据</button>
数字:<input v-model.number="number" type="number" placeholder="请输入数字"/>
</div>
<script type="text/javascript">
new Vue({
el:'#div1',
data:{
page: 'https://cn.bing.com/'
}
})
new Vue({
el:'#div2',
data:{
name:'',
number:''
},
methods:{
getName:function(){
alert(this.name);
},
getNumber:function(){
alert(typeof this.number);
alert(this.number.charCodeAt());
}
}
})
</script>
</body>
</html>