话不多说, 直接上代码, 注释很清楚
- <template>
- <div>
- <input type="text" v-model="value">
- <p>{{pValue}}</p>
- <input type="text" v-model="userName.name">
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- value:'111111111',
- pValue:"12",
- userName:{
- name:"Mir.Wang"
- }
- }
- },
- watch: {
- value(a,b){ // 监听 input 值, 发生变化就会触发
- this.pValue = a
- },
- pValue(a,b){ // 监听 p 标签得值, 当 input 值发生变化时, 设置了 p 标签的值, 该函数就会触发
- //console.log(a,b)
- },
- "userName.name"(a,b){ // 用字符串的方法来取代深度监听 deep:true,// 深度监听底层一个一个得遍历, 很浪费性能
- console.log(a,b)
- }
- },
- }
- </script>
来源: http://www.bubuko.com/infodetail-3102123.html