你的位置:首页 > Java教程

[Java教程]Vue计算属性


github地址:

 

一 计算属性定位

当一些数据需要根据其它数据变化时,这时候就需要计算属性

 

二 $watch实现计算属性

举个栗子:

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>vue计算属性</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>  </head>  <body>    <div class="test">      a的值是{{a}}      b的值是{{b}}    </div>    <script type="text/javascript">      var myVue = new Vue({        el: ".test",        data: {          a: 1,          b: 0        }      })      myVue.$watch("a",function () {        this.b = this.a+3;      })    </script>  </body></html>

正常输出时:a的值是1,b的值为0,但是当在控制台输入:

说明b的数据是根据a变化而变化的

 

三 computed实现计算属性

上面用$watch可以实现计算属性,但是有点麻烦,首先需要定义b,实例化以后给实例绑定一个$watch方法,下面来看一个更简单的方法实现计算属性

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>vue计算属性</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>  </head>  <body>    <div class="test">      a的值是{{a}}      b的值是{{b}}    </div>    <script type="text/javascript">      var myVue = new Vue({        el: ".test",        data: {          a: 1        },        computed: {          b: function () {            return this.a+3;          }        }      })    </script>  </body></html>

上面正常的输出是:a的值是1,b的值是4,但是在控制台输入:

说明b的数据是根据a变化而变化的

 

四 set实现反计算

多数时候a变化,b跟着a变化,但是有时候我们想让b变化时,a跟着b变化,Vue作者给我们提供了set方法来反计算.

举个栗子:(get是b获取值,set是给b赋新值)

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>vue计算属性</title>    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>  </head>  <body>    <div class="test">      a的值是{{a}}      b的值是{{b}}    </div>    <script type="text/javascript">      var myVue = new Vue({        el: ".test",        data: {          a: 1        },        computed: {          b:{            get: function () {              return this.a+3;            },            set: function (newValue) { //参数不能少              this.a = newValue-1;  //a的值变化也会导致b变化            }          }        }      })    </script>  </body></html>

上面正常的输出是:a的值是1,b的值是4,但是在控制台输入: