<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="example">
<p>{{msg}}</p>
<input type="" name="" v-model="uname">
<h1>{{uname}}</h1>
<input type="checkbox" name="" v-model="isUserAgree">是否同意
<br/>
<button :disabled="!isUserAgree">注册</button>
<input type="" name="" v-model.number="num1">
<input type="" name="" v-model.number="num2">
<button @click="sum">求和</button>
</div>
<script type="text/javascript">
//注:v-model只能用于表单元素
new Vue({
el:'#example',
data:{
msg:'VueJS is Awesome',
uname:'',
isUserAgree:false,
num1:0,
num2:0
},
methods:{
sum(){
alert(this.num1+this.num2);
}
}
});
</script>
</body>
</html>
v-model
最新推荐文章于 2024-07-23 15:04:40 发布