vue和小程序之双向绑定
2019-02-20 本文已影响0人
郭先生_515
- 设置值
在vue中,只需要再表单元素上加上v-model,然后再绑定data中对应的一个值，当表单元素内容发生变化时，data中对应的值也会相应改变，这是vue非常nice的一点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双向绑定</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="val" name="" placeholder="请输入">
<p>{{val}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
val: ''
}
})
</script>
</html>
但是在小程序中，却没有双向绑定这个功能。那怎么办呢？
当表单内容发生变化时，会触发表单元素上绑定的方法，然后在该方法中，通过this.setData({key:value})来将表单上的值赋值给data中的对应值。
wxml部分：
<input bindinput="bindVal" placeholder="请输入" value='{{val}}' name="" />
<view>{{val}}</view>
js部分：
Page({
data:{
val:''
},
bindVal(e) {
this.setData({
val: e.detail.value
})
}
})
- 取值
在vue中，通过this.reason取值；
小程序中，通过this.data.reason取值。
Vue实现双向绑定的原理： Object.defineProperty();
代码效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>双向绑定原理</title>
</head>
<body>
<input type="text" id="input" name="">
<div id="div"></div>
</body>
<script>
let obj = {};
let input = document.getElementById('input');
let div = document.getElementById('div');
Object.defineProperty(obj, 'val', {
set: function(newVal){
input.value = newVal;
div.innerHTML = newVal;
}
})
input.addEventListener('keyup', function(event){
obj.val = event.target.value;
})
</script>
</html>
