<template>
 <div class="input-text">
 <input type="text" v-model='firstName'>
 <input type="text" v-model='lastName'>
 {{fullName}}
 </div>
</template>

<script>
export default {
 components: {

 },
 ready: function() {

 },
 methods: {
 },
 data() {
 return {
 firstName: 'Foo',
 lastName: 'Bar'
 }
 },
 computed: {
 fullName: {
 // getter
 get: function() {
 return this.firstName + ' and ' + this.lastName
 },
 // setter
 set: function(newValue) {
 var names = newValue.split(' and ')
 this.firstName = names[0]
 this.lastName = names[names.length - 1]
 }
 }
 }
}
</script>

<template>
 <div class="input-text">
 <input type="text" v-model='a'>{{b}}
 <input type="button" value="修改b的值" @click='updateData'>
 <input type="text" v-model='c'>
 </div>
</template>

<script>
export default {
 components: {
 },
 ready: function() {
 },
 methods: {
 updateData:function(){
 this.b=this.b;//给 b 重新赋值时就会调用 b 的 set 属性,从而改变 c 的值
 }
 },
 data() {
 return {
 a:'1:30',
 c:''
 }
 },
 computed: {
 b:{
 get: function() {//通过a的值改变b的值
 var time=this.a;
 time = time "_blank" href="https://www.jb51.net/Special/874.htm">Vue.js前端组件学习教程》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。