精华内容
下载资源
问答
  • vue计算属性使用方法

    2020-11-24 14:02:16
    vue计算属性使用方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <h1>{{...

    vue计算属性使用方法

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    
    <body>
      <div id="app">
        <h1>{{name}}</h1>
        <input type="text" v-model="name">
        <input type="text" v-model="age">
        <h1>表达式:{{name.split('').reverse().join('')}}</h1>
        <h1>过滤器:{{name|rev}}</h1>
        <h1>方法:{{rev()}}</h1>
        <h1>计算属性:{{newRev}}</h1> 
        <!-- 使用计算属性的时候不能添加(),否则会报错 -->
    
        <h4>{{newAge}}</h4>
    
      </div>
      <script src="../node_modules/vue/dist/vue.js"></script>
      <script>
        let vm = new Vue({
          el: '#app',
          data: {
            name: '测试',
            // rev: '哈哈哈',
            age: 20
          },
          filters:{ 
            // 过滤器由于不会被挂载到当前实例上,所以可以与data、methods等变量名重名,不影响它的使用
            rev(val){
              // 不管更改了 this.name还是 this.age 这个函数都会执行
              console.log('filter');
              return val.split('').reverse().join('')
            }
          },
          methods: {
            // 方法中的方法名不能跟data中的变量名重复,否则会报错
            rev() {
              // 不管更改了 this.name还是 this.age 这个函数都会执行
              console.log('method');
              return this.name.split('').reverse().join('')
            }
          },
          computed: {
            // 计算属性的方法中的this都是当前实例,且计算属性最终会被挂载到当前实例vm上,所以它不能与data中的属性名重复,否则会报错
            // 不能与methods中的方法名重复,否则会被覆盖
            /* rev(){
              return this.name.split('').reverse().join('')
            } */
    
            // 计算属性的简写
            newRev() {
              // this -> vm
              // 只要这个属性的依赖不发生改变,那么这个函数就不会执行(只要this.name的值不变,这个函数就不执行)
    
              // 只有它的依赖 this.name 的值更改了,这个函数才会执行
              console.log('computed')
              return this.name.split('').reverse().join('')
            },
    
            // 一般计算属性中直接return一个值,则该计算属性只能读取,不能更改,如果想要更改,则需要将其get和set函数写全(计算属性的全写)
            newAge: {
              get() {
                // 获取该计算属性的值会触发这个函数执行
    
                // 计算属性只能用于同步
                setTimeout(() => { // 异步:更改异步中的依赖,异步回调函数也不会执行
                  console.log(this.name); // 更改依赖 this.name的值,不管等多久这里都不会执行
                }, 10);
    
                console.log('newAge'); // 连带着这里也不执行,只有更改的是依赖 this.age(同步),这里才会执行
                return this.age;
              },
              set(val){
                // 给该计算属性设置值的时候会触发这个函数
                // val就是要给计算属性 newAge 设置的新值
                this.age = val;
              }
            }
          }
        });
        vm.newAge = 100; // 可以更改;
        // vm.newRev = '123'; // 报错 Computed property "newRev" was assigned to but it has no setter.
    
      </script>
    </body>
    
    </html>
    
    展开全文
  • Vue 计算属性使用经验总结 一、计算属性不能改变给外部变量进行赋值操作 二、计算属性与函数主要区别与应用 计算属性与函数主要区别 计算属性有缓存,返回值不变的情况下不用进行重新计算,函数每次都重新进行...

    Vue 计算属性使用经验总结

    一、计算属性不能改变给外部变量进行赋值操作

    在这里插入图片描述

    二、计算属性与函数主要区别与应用

    • 计算属性与函数主要区别

      • 计算属性有缓存,返回值不变的情况下不用进行重新计算,函数每次都重新进行计算;
      • 计算属性在数据改变时对返回值进行重新计算,函数则在函数调用时进行计算,数据改变时不自动计算;
    • 计算属性主要应用

      • 用于动态设置样式
        <!DOCTYPE html>
        <html lang="en">
        <head>
        	<meta charset="UTF-8">
        	<title>Vue 计算属性使用经验总结</title>
        </head>
        <style>
        	#app div{
        		width: 100px;
        		height: 100px;
        	}
        </style>
        <body>
        
        <div id="app">
        	<button @click="changeColor">改变颜色</button>
        	<div :style="divStyle">
        
        	</div>
        </div>
        
        <!-- 开发环境版本,包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
        	app = new Vue({
        		data: {
        			backgroundColor: 'green'
        		},
        		methods: {
        			changeColor() {
        				this.backgroundColor = 'blue'
        			}
        		},
        		computed: {
        			divStyle(){
        				let style = {}
        				style['background-color'] = this.backgroundColor
        				return style
        			}
        		}
        	}).$mount('#app')
        </script>
        
        </body>
        </html>
        
    展开全文
  • <el-image class="imgs-style" :src="val.fileUrl" v-for="(val) in itemB.imgs" :preview-src-list="previewSrcList(itemB.imgs)"></el-image> 在js里面 computed: { previewSrcList () { ...
    <el-image class="imgs-style" :src="val.fileUrl" v-for="(val) in itemB.imgs" :preview-src-list="previewSrcList(itemB.imgs)"></el-image>
    

    在js里面
    computed: {
    previewSrcList () {
    return function (val) {
    let list = [];
    val.forEach( element => {
    list.push(element.fileUrl);
    });
    return list;
    }
    }
    },

    展开全文
  • 计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 1.基本用法 --> <h2&...
  • Vue计算属性使用

    2020-08-29 19:20:46
    本篇文章主要介绍了Vue计算属性使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 计算属性就是模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。这篇文章主要介绍了vue计算属性详解,需要的朋友可以参考下
  • 主要介绍了vue计算属性computed的使用方法,结合实例形式分析了vue计算属性computed的基本用法及相关操作注意事项,需要的朋友可以参考下
  • Vue 计算属性的基本应用

    计算属性 (computed)

    • 在computed属性对象中定义计算属性的方法;在页面中使用 {{方法名}} 来显示计算的结果

    例如在下面的input中,如果要让该文本框内容本更,可以结合computed属性来完成,其中必须要用v-model命令进行绑定

    <input type="text" placeholder="First Name" v-model="firstName"/>
    
    computed:{
    	//什么时执行: 初始化显示 / 相关的data属性数据放生改变
    	firstName(){//	计算属性中的一个方法,方法的返回值作为属性值
    		return this.firstName + '计算后的数据';
    	},
    }
    
    • 计算属性高级
      通过getter/setter实现对属性数据的显示和监视;
      切记:计算属性存在缓存,多次读取只执行一次getter计算
    firstName:{
    	//回调函数 当需要都去当前属性值时回调, 根据相关的数据计算并返回当前属性的值
    	get(){
    		return this.firstName + '计算后的数据';
    	},
    	//回调函数 监视当前属性值的变化 当属性值发生改变时回调,更新相关的属性数据
    	set(value){// value 就是firstName的最新属性值
    		this.firstName = '1111';
    	}
    }
    

    监视属性 (watch)

    • 通过vm对象的 $watch() 或 watch配置来监视指定的属性。
      当属性变化时,回调函数会自动调用,在函数内部进行计算;
      其中监视分为配置监视和vue的实例方法
    watch:{// 此为配置监视
    	firstName(newValue, oldValue){
    		return this.firstName + '计算后的数据';
    	},
    }
    
    • vue实例方法监视
    vm.$watch('firstName',function(newValue, oldValue){
    	this.firstName = newValue + '计算后的数据';
    })
    

    注意:每一个属性都有一个对应的set/get放到,它们均为回调函数;其中get方法的作用是返回当前属性的值,set(value)方法为监视作用,一但属性值更改后就会触发,value为最新的值

    展开全文
  • vue计算属性使用和vue实例的方法

    千次阅读 2017-12-03 21:08:08
    vue计算属性和vue实例对象的简单方法
  • Vue计算属性

    2020-06-20 17:01:38
    Vue中可以使用插值语法来显示data中的数据,但是如果需要多个数据进行整合,使用插值就显得程序太过复杂、繁琐,可以使用计算属性来将多个数据进行整合,形成一个计算属性,计算属性使用关键字computed ...
  • vue计算属性

    2019-05-19 09:15:11
    vue计算属性详解——小白速会 一、什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: {{ message.split('').reverse().join(''...
  • vue计算属性使用

    千次阅读 2018-06-15 12:10:23
    我们有时候会在模板中绑定表达式来做简单的数据处理,但是如果表达式太长...表达式里面包含了3个操作,有时候可能会更加复杂,这时我们可以使用计算属性。如下&lt;template&gt; &lt;div&gt; {{re...
  • vue计算属性使用(computed) 我们在一些数据需要实时响应,经常更新的地方使用计算属性,虽然说定义一个方法也可以,直接在{{}}中写入逻辑代码也行,但是难免看起来会有一点麻烦,并且后期也不易维护. 比如: 使用vue进行...
  • vue计算属性computed

    2020-01-30 12:08:12
    vue计算属性computed 在computed中,可以定义一些计算属性,计算属性本质就是一个方法,在使用计算属性时可以作为属性使用 简单使用 新建两个data属性 新建computed属性 computed: { oandt: function () {...
  • 当需要使用多个变量的计算结果时,若在元素中写表达式将会显得很别扭,此时可以利用vue计算属性,将计算结果返回给一个计算属性,后面直接使用该属性,利用计算属性结合v-module可以实现简单的计算器功能 ...
  • vue计算属性与监视属性

    千次阅读 2020-12-15 16:47:29
    计算属性与监视属性 ...使用vue计算属性实现一个简单的查找: 效果前: 效果后: html里面写: <div id="app"> <input type="text" placeholder="请输入商品" v-model="value" />&l

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,952
精华内容 1,180
关键字:

vue计算属性使用

vue 订阅