Java程序员入门Vue基础之数据绑定与计算属性（二）

文章目录

1. 数据绑定
2.计算属性

1. 数据绑定

数据绑定是讲数据和视图相关联，当数据发生变化时，可以自动更新视图。

插入值

文本插入值是最基本使用方式，我们在vue渲染的组件中使用{{message }} 然后将vue的data中设置messaged的值，代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
</head>
<body>
  <div id="app">
      <input type="text" v-model="message">
        <p>
            {{message}}
        </p>
  </div>  
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
    let app=new Vue({
        el:'#app',
        data:{
        message:'Trump is so stupid!'
       }
    })
</script>
</html>

例子中的标签 {{message}} 将会被相应的vue中定义的数据对象message的值替换掉，当输入框的值进行更改时候，我们发现下面P标签的{{message}}的值也会动态变化。

表达式

我们可以对{{message}} 进行简单的表达式运算，例如我们可以将页面p标签进行大写转换如下所示：
在这里插入图片描述页面展示效果如下所示：

2.计算属性

通常我们会在模版中绑定表达式，模版是为了描述视图中对应的数据。我们可以对表达式进行计算。当计算属性对应的值发生改变时候，与之相关的视图数据也会进行相应的变化。

首先让我们需要知道的是Vue提供的一个computed方法，我们通过这个方法实现对数据的一些计算操作。下面我们先看一下一个案例效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="app">
     A列:  <input type="text" v-model="v1"/>
            {{v1}}</br>
     B列:  <input type="text" v-model="v2"/>
            {{v2}}</br>
     C列:  <input type="text" v-model="v3"/>
            {{v3}}</br>
   </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
    let app = new Vue({
        el:'#app',
        data:{
            v1: 'Donald',
            v2: 'Trump',
        
        },

        computed: {
           v3() {
             return this.v1+" "+this.v2
           }
        },
       
    })

   
</script>
</html>

你可以看到当A列和B列的数据发生变化时候，C列的数据也发生了变化。这里我们计算了v3的的值，v3()方法相当于model的getter方法。但是当我们对v3的输入框输入值时候v1和v2的值没有任何变化，如果想要实现如下这样的效果呢？
在这里插入图片描述既然我们提供了v3的getter方法，同理我们也可以在computed中为其设置setter方法。代码示例如下：

       computed: {
            v3 : {
                get: function() {
                    return  this.v1+" "+this.v2 +" " +Date.now()
                },

                set:function(newval) {
                 let values= newval.split(' ');
                 this.v1=values[0];
                 this.v2=values[1]
                }
          }
        },

运行后我们发现当改变v3的值时候，v1的值或v2的值也相应进行更改，每一次操作时间戳对象都在变化表示：每次getter都是获取最新的对象值。