表单和侦听器

表单输入绑定

修饰符：

.lazy

.number

.trim

watch：监听数据变化

计算属性vs监听属性

能用计算属性的，一般都用计算属性，实在不行才用监听属性；

<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>