name1 改变时, 同时改变 name2;name2 改变时, 同时改变 name1
使用 watch 实现
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>
- 使用 watch 实现
- </title>
- <script src="../js/vue.js">
- </script>
- </head>
- <body>
- <div id="app">
- 姓名 1:
- <input type="text" v-model="name1">
- <br/>
- <!-- 使用计算属性 -->
- 姓名 2:
- <input type="text" v-model="name2">
- <!-- 使用 watch-->
- </div>
- <script>
- const vm = new vue({
- el: '#app',
- data: {
- name1: '',
- name2: ''
- },
- watch: {
- // 使用 watch 监视 name2, 并更新 name1 的值
- name2: function(newValue, oldValue) {
- this.name1 = newValue
- },
- // 使用 watch 监视 name1, 并更新 name2 的值
- name1: function(newValue, oldValue) {
- this.name2 = newValue
- }
- }
- })
- </script>
- </body>
- </HTML>
使用计算属性的 get 和 set 实现
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>
- 使用计算属性的 get 和 set 实现
- </title>
- <script src="../js/vue.js">
- </script>
- </head>
- <body>
- <div id="app">
- 姓名 1:
- <input type="text" v-model="name1">
- <br/>
- <!-- 使用计算属性 -->
- 姓名 2:
- <input type="text" v-model="name2">
- <!-- 使用 watch-->
- </div>
- <script>
- const vm = new Vue({
- el: '#app',
- data: {
- name2: ''
- },
- computed: { // 使用计算属性计算 name1 的值, 并更新 name2 的值
- name1: {
- get() { // name1 的计算值
- return this.name2
- },
- set(value) { // name1 改变时同时设置 name2 的值
- this.name2 = value
- }
- }
- },
- })
- </script>
- </body>
- </HTML>
来源: http://www.bubuko.com/infodetail-3784844.html