精华内容
下载资源
问答
  • 计算属性

    千次阅读 2019-08-22 08:03:34
    计算属性 计算属性在Vue实例中使用computer选项来实现。 计算属性的书写格式:computed:{ 属性名:function(){ return 返回值; } } 在computed中定义的function不是方法,而是属性。 计算属性在data中不用书写。 例1...

    计算属性

    1. 计算属性在Vue实例中使用computer选项来实现。
    2. 计算属性的书写格式
      computed:{ 属性名:function(){ return 返回值; } }
      在computed中定义的function不是方法,而是属性。
      计算属性在data中不用书写。
    3. 例1:实现两个数值的相加
      computed:{ add:function(){ return this.numA+this.numB; } }
      ①上述代码中的计算属性是add。
      ②计算属性执行的function中涉及到的数据量被称为计算属性的依赖数据。
      ③计算属性:当该属性的依赖数据发生变化时,则该属性会重新进行计算。
      ④计算属性执行的function中renturn的返回值是计算属性计算的最终结果。

      例2:实现两个数值的加减乘除运算(add、sub、mul、div)。
    		var app=new Vue({
                el:'#app',
                data:{
                    numA:0,
                    numB:0
                },
                computed:{
                    result:function(){
                        var add=this.numA+this.numB;
                        var sub=this.numA-this.numB;
                        var mul=this.numA*this.numB;
                        var div=this.numA/this.numB;
                        return {add:add,sub:sub,mul:mul,div:div}
                    }
                }
    

    通过上面两个案例我们认识到计算属性的方便~

    下面让我们进一步了解计算属性的用法:

    1. 计算属性包含两个操作:
      ①getter,获取计算属性的结果,默认的function是获取结果。用get:function(){}实
      现。当依赖数据发生变化时会自动执行get函数。
      ②setter,设置计算属性的结果。用set:function(){}实现。当计算属性通过v-model绑定在表单元素上,用户对表单元素的值进行了修改时执行set函数。
    computed:{
    	   result:{
    		     get:function(){
    		       		return 返回值;
    			},
    			set:function(参数){
    			
    			}
        	}
    }
    
    1. 例:实现姓名的拆分:
      本案例是通过Vue的v-model指令实现,我们来看一下整体是这样的:
      在这里插入图片描述
      然后当我们在姓名框里书写姓名的时候他会自动的把姓和名分开:
      ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190822075123227.png]

    实现原理很简单,用我们所学的v-model指令分别绑定输入框,然后通过上述的getter和setter拆分和拼凑姓名,同样也是数据的双向绑定。

    HTML代码:

    	<div id="app">
            <p>姓名:<input type="text" v-model="fullName"></p>
            <p>
                姓:<input type="text" v-model="firstName">
                名:<input type="text" v-model="lastName">
            </p>
        </div>
    

    Javascript代码:

    		var app=new Vue({
                el:'#app',
                data:{
                    firstName:'',
                    lastName:'',
                    fuX:["欧阳","慕容","迪丽","上官","百里","干将","端木","独孤"]//简单的列举了几个复姓的例子
                },
                computed:{
                    fullName:{
                        get:function(){
                            return this.firstName+this.lastName;
                        },
                        set:function(newName){
                            var flag=0;  //不是复姓
                            var temp=newName.slice(0,2);
                            for(var i=0;i<this.fuX.length;i++){
                                if(temp==this.fuX[i]){
                                    flag=1;         //利用for循环遍历复姓里的内容,如果有就跳出循环,输出复姓
                                    break;
                                }
                            }
                            if(flag==0){
                                this.firstName=newName[0];
                                this.lastName=newName.slice(1);
                            }else{
                                this.firstName=temp;
                                this.lastName=newName.slice(2);
                            }
                        }
                    }
                }
            })
    

    原理其实很简单,就是通过v-model指令配合computed计算属性来实现,里边的一些逻辑关系很清晰

    希望对你有帮助哦~

    展开全文
  • vue中computed计算属性传入参数

    万次阅读 2018-09-01 16:56:42
    使用JavaScript闭包,进行传值操作。 computed: { // 控制显示的内容 computedTxt() { return function(value) { return this.methodGetByteLen(value, 20) ...做一个简单的功能,使用计算属性判断传入的...

    将计算属性的返回值改为函数,再进行传值操作。

    computed: {
          // 控制显示的内容
          computedTxt() {
            return function(value) {
              return this.methodGetByteLen(value, 20)
            }
          }
    }

    做一个简单的功能,使用计算属性判断传入的字符超过了20就去掉后面的字符在尾部添加。。。

    /**
           * str 需要控制的字符串
           * len 字节的长度,如5个汉字,10个英文,输入参数就是10
           */
          methodGetByteLen(str, len) {
            //因为第一次进入时为空,所以此if进行拦截
            if (str === null || str === undefined || str == '') {
              return;
            }
            // 如果字节的长度小于控制的长度,那么直接返回
            if (this.computedCharLen(str) <= len) {
              return str
            }
            for (let i = Math.floor(len / 2); i < str.length; i++) {
              if (str.substr(0, i).replace(/[^\x00-\xff]/g, '01').length >= len) {
                return str.substr(0, Math.floor(i / 2) * 2) + '......'
              }
            }
          },
          // 获取字符的个数
          computedCharLen(str) {
            let realLength = 0, len = str.length, charCode = -1;
            for (let i = 0; i < len; i++) {
              charCode = str.charCodeAt(i);
              if (charCode >= 0 && charCode <= 128) realLength += 1;
              else realLength += 2;
            }
            return realLength;
        }
    <ul class="r-list">
          <li v-for="(item,index,key) in result" :key="key">
            <div>{{computedTxt(item.title)}}</div>
            <div>{{item.time}}</div>
          </li>
        </ul>

    还可以使用filters 过滤器。

    展开全文
  • Vue 计算属性与监听属性

    千次阅读 2019-05-16 10:01:04
    这篇文章将介绍计算属性与监听属性去解决该问题。 计算属性 [什么是计算属性?] 首先,来看一个字符串反转的例子: <div id="app1"> {{ message.split('').reverse().join('') }} </div> <s...

    前面的话

    模板内的表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护。这篇文章将介绍计算属性与监听属性去解决该问题。

    计算属性

    [什么是计算属性?]

    首先,来看一个字符串反转的例子:

    
        <div id="app1">
             {{ message.split('').reverse().join('') }}
        </div>
        <script>
        	new Vue({
                el: "#app1",
                data: {
                    message: 'xiaoqi'
                }
            })
        </script>
    
    

    上面这个例子,在模板中表达式包括3个操作,相对比较复杂,也不容易看懂。

    所以在遇到复杂的逻辑时应该使用计算属性。

    将上例进行改写:

    <div id="app2">
        <p>原字符串:{{message}}</p>
        <p>计算后反转字符串: {{reverseMessage}}</p>
     </div>
    <script>
    new Vue({
            el: "#app2",
            data: {
                message: 'xiaoqi'
            },
            computed: {
                // 计算属性的getter
                reverseMessage: function() {
                    return this.message.split('').reverse().join('');
                }
            }
        })
    </script>
    

    在这里插入图片描述
    上面的模板中声明了一个计算属性reverseMessage。
    提供的函数将用作属性reverseMessage的getter(用于读取)。
    reverseMassage依赖于massage,在massage发生变化时,reverseMassage也会更新。

    [ computed Vs methods]

    我们发现computed属性完全可以由methods属性所代替,效果时完全一样的。既然使用methods就可以实现,那么为什么还需要计算属性呢?原因就是computed是基于它的依赖缓存,只有相关依赖发生改变时,才会重新取值。而使用methods,在重新渲染的时候,函数总会重新调用执行。可以说使用computed性能会更好。

    [ 依赖缓存]

    举一个更好说明computed是基于依赖缓存的例子:

     <div id="app3">
            <p>原字符串:{{message}}</p>
            <p>计算反转字符串:{{reverseMessage1}}</p>
            <p>计算反转字符串:{{reverseMessage1}}</p>
            <p>计算反转字符串:{{reverseMessage2()}}</p>
            <p>计算反转字符串:{{reverseMessage2()}}</p>
    </div>
    <script>
      var num = 1;
        new Vue({
            el: "#app3",
            data: {
                message: 'xiaoqi'
            },
            computed: {
                reverseMessage1:function () {
                    num += 1;
                    return num +  this.message.split('').reverse().join('');
                }
            },
            methods: {
                reverseMessage2() {
                    num += 1;
                    return num + this.message.split('').reverse().join('');
                }
            }
            
        })
    </script>
    

    在这里插入图片描述
    这个例子中,num是一个独立的变量。在使用reverseMessage1这个计算属性时,num会变成2 。但是当再使用reverseMessage1属性时,num没有变化,依然是2。因为Vue实例的message数据没有发生变化 于是DOM渲染就直接用这个值,不会重复执行代码。而reverseMessage2这个方法只要用一个,就要执行一次,于是每次返回的结果都不一样。

    [computed setter]

    每一个计算属性都包含一个getter与一个setter,上面的实例中都是计算属性的默认用法,只是利用getter来读取。
    computed属性默认只有getter,不过在需要时可以自己提供一个setter函数,当手动修改计算属性的值时,就会触发setter函数,执行自定义的操作。
    例如:

    <div id="app4">
        <p>{{ site }}</p>
    </div>
    <script>
     var vm =  new Vue({
            el: "#app4",
            data: {
                name: '淘宝',
                url: "http://www.Taobao.com"
            },
            computed: {
                site: {
                    // getter
                    get: function() {
                        return this.name + ' '+this.url;
                    },
                    // setter
                    set: function(newValue) {
                        var names = newValue.split(' ');
                        this.name = names[0];
                        this.url = names[names.length -1];
                    }
                }
            }
        });
        // vm.site的值是newValue对应的实参
        vm.site = 'baidu http://www.baidu.com';
        document.write('name:' + vm.name );
        document.write('<br>');
        document.write('url:'+ vm.url );
        </script>
    
    

    在这里插入图片描述
    上面的代码,当我们执行vm.site=‘baidu http://www.baidu.com’时,数据name与url都会相对更新,视图也会更新。

    监听属性 watch

    通过watch来响应数据的变化。
    虽然大多数情况计算属性都可以满足需要,但有时还是需要使用侦听器。当需要在数据发生变化时执行异步操作或者开销较大的操作时,就需要自定义监听器。

    [实例1]:通过使用watch实现计数器:

     <div id="app5">
            <p style = "font-size: 25px;">计数器:{{ counter }}</p>
            <button @click = "counter++" style="font-size: 25px"> 点击我</button>
     </div>
     <script> 
        var vm1 = new Vue({
            el: "#app5",
            data: {
                counter: 1
            }
        });
        vm1.$watch('counter',function(nval,oval) {
            alert('计数器值的变化:' + oval + '变为' + nval + "!");
        })
     </script>
    

    注意:$watch是一个实例方法,后面是一个回调函数,这个回调函数将在counter值改变之后调用
    在这里插入图片描述
    在这里插入图片描述

    [实例2]:千米与米之间的换算

      <div id="app6">
            千米:<input type="text" v-model='kilometers'>
            米:<input type="text" v-model='meters'>
            <p id="info"></p>
        </div>
         <script> 
         var vm2  = new Vue({
            el: '#app6',
            data: {
                kilometers:0,
                meters:0
            },
            watch: {
                // 监听kilometers数据
                kilometers: function(val) {
                    console.log(val);
                    this.kilometers = val;
                    this.meters = this.kilometers * 1000;
                },
                // 监听meters数据
                meters: function(val) {
                    this.meters = val;
                    this.kilometers = val /1000;
                }
            }
        });
        // $watch是一个实例方法
        vm2.$watch("kilometers",function(newValue,oldValue) {
            // 这个回调函数在vm2.kilometers改变后调用
            document.getElementById('info').innerHTML =  "修改前值为: " + oldValue + ",修改后值为: " + newValue;
        })
     </script>
    

    在这里插入图片描述

    [computed与watch的区别]

    简单来说:
    1:computed是同步的,watch可以实现异步
    2:computed中的函数都是带返回值的,wacth里面的函数可以不写返回值。

    我们可以在watch属性的方法里执行异步操作,使用定时器来限制操作的频率吧,添加中间状态等等,这些操作都是无法用计算属性实现的。

     <div id="app">
          {{count}}
          <button @click="count++">点击加一</button>
     </div>
    <script>
    new Vue({
    	el: "#app",
    	data: {
    	count: 1
    	},
    	watch: {
           count: function(val) {
     			var  that = this;
    			window.setTimeout(function() {
    				that.count = 0;
    		},2000)
    }
    }
    })
    </script>
    

    在这里插入图片描述
    当watch监听到count值发生变化时,2秒之后归零
    在这里插入图片描述

    计算属性、指令实现简单实战

    实例:通过计算属性、指令等实现简单的购物车

     <style>
            table {
                 border: 1px solid black;
                 width: 100%;
                }
          
            th {
                height: 50px;
                }
            th, td {
                border-bottom: 1px solid #ddd;
                }
        </style>
        <div id="app7">
            <table>
                <tr>
                    <th>序号</th>
                    <th>商品名称</th>
                    <th>购买价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="iphone in IP_Json">
                    <td>{{iphone.id}}</td>
                    <td>{{iphone.name}}</td>
                    <td>{{iphone.price}}</td>
                    <td>
                        <!-- v-bind指令的参数disabled,当iPhone.count === 0时,不可再点击 -->
                        <button :disabled="iphone.count === 0" @click="iphone.count-=1">-</button>
                        {{iphone.count}}
                        <button @click="iphone.count+=1">+</button>
                    </td>
                    <td>
                        <button @click="iphone.count=0">移除</button>
                    </td>
                </tr>
            </table>
            总价:${{totalPrice}}
        </div>
        <script>
         var shop = new Vue({
            el:"#app7",
            data: {
                IP_Json: [{
                    id: 1,
                    name: "huawei",
                    price: 5099,
                    count: 1
                  },
                  {
                      id:2,
                      name: "xiaomi",
                      price: 4899,
                      count: 1
                  },
                  {
                      id:3,
                      name: "iphone x",
                      price: 8900,
                      count: 1
                  },
                ]
            },
            computed : {
                totalPrice: function() {
                    var totalP = 0;
                    var len = this.IP_Json.length;
                    for( var i= 0; i<len;i++){
                        totalP += this.IP_Json[i].price * this.IP_Json[i].count;
                    }
                    return totalP;
                }
            }
        })
    </script>
    
    展开全文
  • vue 第四天 (计算属性的使用)

    万次阅读 2021-03-02 16:07:09
    vue 第四天 (计算属性的使用) 因为{{div1+div2+div3+div4+…+n}}这种写法比较复杂所以加上 computed 计算属性 1、computed 计算属性 cmputed 可以完成各种复杂的逻辑,包括运算,函数调用等,只要最终返回一个结果就...

    vue 第四天 (计算属性的使用)

    因为{{div1+div2+div3+div4+…+n}}这种写法比较复杂所以加上 computed 计算属性

    1、computed 计算属性

    cmputed 可以完成各种复杂的逻辑,包括运算,函数调用等,只要最终返回一个结果就可以

    computed 具有缓存功能,只有依赖数据发生改变,才会重新进行计算,否则直接返回之前的计算结果

    每个计算属性都包含一个 getset

    利用 computed 计算属性进行计算

    <div id="apps">
        <div>{{div1}}</div>
        <div>{{div2}}</div>
        <div>{{div3}}</div>
    </div>
    
    <script>
        const vue = new Vue({
            el: "#apps",
            data: {
                div1: 123,
                div2: 456
            },
            computed: {
                div3: function () {
        <!-- 这里写计算属性的一些逻辑判断复杂操作-->
                    return this.div1 + this.div2;
                }
            }
        })
    </script>
    

    2、get 大多数情况下可以省略

    下面是 简化 和一个 get 写法

    get相当于输出值

    computed: {
                div3: {
                    get:function() {
                        return this.div1 + this.div2;
                    }
                },
                div3: function () {
                    return this.div1 + this.div2;
                }
            }
    

    3、set 不常用(计算属性一般是没有set方法,只读属性)

    浏览器敲f12 上输入 vue.div3 = “hello 你好”

    set相当于赋值

    <div id="apps">
        <div>{{div1}}</div>
        <div>{{div2}}</div>
        <div>{{div3}}</div>
    </div>
    <script>
        var vue = new Vue({
            el: "#apps",
            data: {
                div1: "123",
                div2: "456"
            },
            computed: {
                div3: {
                    set: function (input) {
                        <!--在控制台输入 vue.div3 = "hello 你好" -->
                        const split = input.split(" ");
                        this.div1 = split[0];
                        this.div2 = split[1];
                        },
                    get: function () {
                        return this.div1 + "-------" + this.div2;
                    }
                }
            }
        })
    </script>
    

    4、计算属性 computedmethods的对比

    计算属性 computed 如果执行多次不做 修改 添加 的话就执行一次

    methods 如果 执行多次不做 修改 添加的话,调用多少次执行多少次

    为什么计算属性就执行一次呢,因为计算属性有缓存







    花开一千年,花落一千年,花叶永不见

    展开全文
  • Vue计算属性

    万次阅读 2019-01-04 15:12:00
    一、计算属性 计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的DOM部分也会同步自动更新。 代码如下: <div id="example"> <input type="text" v-model="didi"> &...
  • React中的“计算属性

    千次阅读 2019-12-10 16:07:42
    相信许多学习过vue的小伙伴对计算属性陌生吧。计算属性能帮我们数据进行一些计算操作,计算属性是依赖于data里面的数据的,在vue中只要计算属性依赖的data值发生改变,则计算属性就会调用。 那React中也有计算...
  • 计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 1.基本用法 --> <h2&...
  • Vue中的计算属性和监听属性

    千次阅读 2019-03-25 17:09:33
    Vue中的计算属性和监听属性 在项目中难免会遇到计算属性和监听属性,这两个都可以 监听数据的变化,但是又有些不同,在这里总结一下 1.computed计算属性 当需要监听一些数据需要随着其它数据变动而变动时,通常更好...
  • computed:计算属性,用于定义一个函数; 本猿在学习的过程中总是把它和生命周期钩子函数弄混了! computed是定义监听某个元素或者某事el的变化,发生变化后触发computed,如果没发生变化,不会触发函数; 这也是...
  • 计算属性与监听属性

    千次阅读 2020-12-15 16:39:50
    计算属性:watch和computed的区别 computed:是一个计算属性具有依赖性只执行一次就拿出来调用下一次获取computed的值时才会重新计算 。 watch:当一条数据影响多条数据的时候就要用watch。 下面展示一些 内联代码...
  • vue计算属性与监视属性

    千次阅读 2020-12-15 16:47:29
    计算属性与监视属性 计算属性 在computed对象中定义计算属性的方法,在页面中使用{{方法名}} 监视属性 通过 vm对象中的$watch方法或者 watch配置来监视指定的属性, 当属性发生变化时,回调函数自动调用,在函数内部...
  • vue 计算属性可以依赖其他计算属性 学习 例子 整理 记录 自学 前端 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div i...
  • 下面是本文的屏幕录像的在线视频: 温馨提示: 1、视频下载:线上视频被压缩处理,可以下载高清版本...本篇文章介绍了Vue.js 3.x的计算属性的一些其他玩法,具体包括:依赖其他计算属性、依赖其他实例的数据、...
  • 1.6、VUE计算属性

    千次阅读 2019-04-17 18:53:07
    什么是计算属性 如下,对于任何复杂逻辑,应当使用计算属性。 <div id="example"> {{ message.split('').reverse().join('') }} </div> <!DOCTYPE html> <html> <head> <meta...
  • vue 计算属性

    千次阅读 2018-07-05 22:15:51
    于是对于任何复杂逻辑,都应当使用计算属性。例如: &lt;div id="example"&gt; &lt;p&gt;{{ msg }}&lt;/p&gt; &lt;p&gt;{{ myMsg }}&lt;/p&gt; &a
  • computed: { isShow(){ // arr-当前数组 value-当前字段 return function(arr,keyVal){ return arr.some(item => { return item[keyVal] != "" && item[keyVal] != null; ... },
  • 绝大多数情况下,我们只会用默认的getter方法来读取一个计算属性,在业务中很少用到setter,所以在声明一个计算属性时,可以直接使用默认的写法,不必将getter和setter都声明。 四、计算属性缓存vs.方法 你可能已经...
  • vue计算属性和方法的区别

    千次阅读 2020-02-07 13:38:34
    1.methods方法: 控制台打印: 当修改其中一个属性时,其他属性的值都没改变,但会发现methods里的...1).methods方法和computed计算属性,两种方式的最终结果确实是完全相同 2).不同的是计算属性是基于它...
  • 记vue计算属性和方法的区别

    千次阅读 2018-08-26 11:14:51
    在vue.js中,计算属性和方法达到的效果是一样的,但是计算属性是基于依赖进行缓存的,只有name或者price发生改变才会导致totalPrice发生改变,只要 price和count还没有发生改变,多次访问 totalPrice计算属性会立即...
  • Vue 计算属性

    千次阅读 2017-03-21 17:44:09
    ①模板内的表达式实际上只用于简单的运算,对于复杂逻辑,使用计算机属性。 ②基础例子: Original message:"{{message}}" Computed reversed message:"{{reversedMessage}}" var vm = new Vue({ el:"#example",...
  • vue计算属性中使用箭头函数出错

    千次阅读 2018-12-21 16:07:39
    和普通属性一样在模板中使用计算属性,当data中对应的数值发生变化时,计算属性的值会发生相应的变化,计算属性compute是基于他们的依赖(如果是实例范畴之外的依赖,比如非响应式的notreactive是不会触发属性更新的...
  • Vue核心技术-8,计算属性

    千次阅读 2018-08-17 14:17:44
    这一篇介绍Vue的计算属性,计算属性定义在vue实例compute选项中, compute计算属性功能上和methods中的方法很相似, 稍后我们会探讨计算属性的使用及计算属性和方法的区别 二,引入计算属性 之前介绍了插值(即双大...
  • 计算属性传值问题

    千次阅读 2019-02-17 13:22:42
    vue2.0 在计算属性能传值,所以对数据的要求比较高,一般最好要直接把数据处理好想要的样子再用,实在不行的时候可以用闭包return出去就可以传值了 //计算属性 computed:{ changeRemarkLength(){ // text...
  • Vue项目中如何使用computed计算属性

    千次阅读 2020-07-03 21:13:11
    文章目录computed:1、基本使用:1.1 应用场景:1.2 代码位置:1.3 值:2、复杂操作-结合data中数据:3、计算属性写法演变:3.1 计算属性的setter和getter:① 完整的计算属性写法:属性+方法② 计算属性一般只有get...
  • css之“计算属性

    千次阅读 2019-03-20 09:23:45
    no,no,no,这和vue的计算属性没有一点关系,所以这次介绍的也和vue无关。 相信大家和我一样,在开发中,也遇到过这样的问题: 我设计样式,多用百分比布局,这样在不同分辨率就不会出现特别大的偏差,但是也能...
  • vue中计算属性与方法的区别

    千次阅读 2018-04-23 14:29:19
    当依赖发生变化时,计算属性的值从缓存中获取,取得上一次的值 当执行的代码很长时,如果得到的结果本身不会有变化,可以用计算属性,当然如果要重新执行代码,则用方法(methods) 如图,切换tab时,如果一直...
  • vue-计算属性不能直接修改

    千次阅读 2020-06-28 09:44:03
    } }, methods : { choose ( index ) { } } 页面:(i标签是一个自定义的复选框,有common-checkbox-cbg 样式 复选框打钩 , 没有就打勾) 问题:如果直接修改计算属性的值,点击复选框,页面不会切换状态,也就是复...
  • vue计算属性做动态数据判断

    千次阅读 2019-07-31 21:11:37
    看到本篇文章,你可能就是知道如何用vue计算属性 可能也看了上面的官网 和其他博客 可能看的自己一脸懵逼 下面本人展示俩案例 直接上代码 案例一, computed: { // 计算属性 arr(){ return this.list.wnd || ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,311,707
精华内容 524,682
关键字:

计算属性不计算