Binding form input
Modifiers:
.lazy
.number
.trim
watch: monitor data changes
Computed Property vs monitor property
Can be used to calculate the property, generally used to calculate property, it is not only used to listen properties;
<template>
<div :class="classdemo">sdfsfs
<form action="">
<input type="text" value="1232222" v-model="msgtexts" placeholder="请输入手机号">
<p>{{msgtexts}}</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
<!-- 懒惰-->
<input type="text" id="" v-model.lazy="msgstxts">
<p>{{msgstxts}}</p>
<!-- number-->
<input type="text" id="" v-model.number="tels">
<p>{{tels}}</p>
<!-- trim-->
<input type="text" id="" v-model.trim="msg">
<p>{{msg}}</p>
<button class="" @click="ageadd">改变按钮来改变p的内容</button>
<p>{{myage}}</p>
</form>
</div>
</template>
<script>
export default {
name: "forma",
data() {
return {
classdemo: "active",
actives: true,
currents: "current",
classobj: {
"text1": true,
"text2": true
},
activeClass: "active1",
currentIndex: "currents",
currentIndex1: "curr",
isActive: true,
colors:"yellow",
msgtexts:"默认值",
checked:false,
msgstxts:"text",
tels:"",
msg:"12345",
myage:10
}
},
methods: {
changecss() {
this.classobj = {
"text1": true,
"text2": false
}
},
ageadd(){
this.myage++;
}
},
watch:{
msgstxts(data){
if(data=="10"){
console.log("10000");
this.msgstxts="输入正确"
}else{
}
},
myage(data){
console.log(data)
}
}
}
</script>
<style scoped>
.active1 {
color: red;
}
.currents {
color: blue;
}
</style>