问题一：input输入框， 绑定计算属性时，没法双向响应，可以和value绑定，再通过input事件，获取dom的value
第一种方法：用computed,不用v-model
单号：
<el-input id="orderNumValue" :value.trim="orderNum"
placeholder="请输入" size="mini" style="width:75px">
</el-input >//这是element-ui的input组件
input
<script>
computed: {
orderNum(){//历史信息单号
switch(this.problemTypesOrder){
case "first":
return this.formData1.billCode;
break;
case "second":
return this.formData2.billCode;
break;
case "four":
return this.formData4.orderCode;
break;
default:
return this.formData1.billCode;
}
}
}
methods: {
upData(){
console.log($("#orderNumValue").val())//通过dom的value值，
获取value，操作数据
}
}
</script>
第二种方法，用watch，和v-model，不用computed
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<input id="wang" type="text" v-model="m.a" @input="fun">
{{m.a}}
<br>
<input type="text" v-model = "n">
{{n}}
</div>
</body>
<script src="https://sv-source.zt-express.com/gongdan/js/vue.min.js"></script>
<script>
console.log(new Date())
new Vue({
el: '#app',
data: function() {
return {
m:{a:"m"},
n:0
}
},
methods: {
fun(val){
console.log(this)
this.$set(this.m,"a",wang.value)
}
},
watch:{
m:{
deep: true,
handler: function (newVal,oldVal){
this.n = newVal.a
}
}
}
})
</script>
</html>
需要注意，Vue2.0 watch对象属性变化监听不到问题
第三种，用计算属性，的get和set
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<input id="wang" type="text" v-model="m.a" >
{{m.a}}
<br>
<input type="text" v-model = "wangNum2">
{{wangNum2}}
</div>
</body>
<script src="https://sv-source.zt-express.com/gongdan/js/vue.min.js"></script>
<script>
console.log(new Date())
new Vue({
el: '#app',
data: function() {
return {
m:{a:"m"},
// n:0
}
},
methods: {
},
computed:{
wangNum1(){//没有重写时
return this.m.a
},
wangNum2:{//重写方法
get(){
return this.m.a
},
set(val){
console.log(val)
this.m.a = val
}
}
}
})
</script>
</html>
计算属性，默认是只有get方法。所以需要重写get，set方法。已达到数据的双向绑定
