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

    2021-02-24 21:15:34
    Vue——计算属性 目录Vue——计算属性1. 计算属性——computed2. 计算属性简单使用3. 计算属性复杂应用4. watch 、computed 、methods 的对比5. 计算属性原理 setter 和 getter 1. 计算属性——computed computed ...

    Vue——计算属性


    1. 计算属性——computed

    1. computed 与 methods 评级
    2. 在 computed 中,可以定义一些 属性,这些属性叫做计算属性,计算属性的本质就是一个方法,只不过,在使用 这些计算属性的时候,是把他们的 名称 ,直接把计算属性当作方法当做属性 来使用;并不会去调用
    3. 计算属性在引用时, 一定 不要加 ()去调用,直接当做普通 属性去使用就行
    4. 只要 计算属性定义 function 内部 ,所用 到的任何data中 的 数据发生变化,就会立即重新计算 这个计算属性的 值
    5. 计算属性的求值结果会被缓存起来,方便下次直接使用;如果 计算属性 方法中,所有数据 都没有发生 新的变化,则,不会 重新对 计算属性求值

    2. 计算属性简单使用

    <div id="app">
         <h2>{{fullName}}</h2>
     </div>
     <script>
         const app = new Vue({
             el: '#app',
             data: {
                 firstname: 'kobi',
                 lastname: 'James'
             },
             computed: {
                 fullName: function () {
                     return this.firstname + ' ' + this.lastname
                 }
             }
         })
     </script>
    

    3. 计算属性复杂应用

      <div id="app">
          总价格为:{{totalPrice}}
      </div>
      <script>
          const app = new Vue({
              el: '#app',
              data: {
                  books: [
                      { id: 1, name: '光年之外', price: 4 },
                      { id: 2, name: '花海', price: 5 },
                      { id: 3, name: '写给黄淮', price: 6 }
                  ]
              },
              computed: {
                  totalPrice: function () {
                      let res = 0;
                      for (let i = 0; i < this.books.length; i++) {
                          res += this.books[i].price
                      }
                      return res
                  }
              }
          })
      </script>
    

    4. watch 、computed 、methods 的对比

    1. computed :computed 属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算;主要当做属性来使用
    2. methods :methods 方法表示一个具体操作,主要书写业务逻辑
    3. watch :watch 一个对象,键 是需要观察的表达式,值是对应的回调函数;主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可看做是computed 和 methods 的结合体;

    5. 计算属性原理 setter 和 getter

    1. 计算 属性 原本 写法
    2. 属性值 发生 改变 时调用 set 方法 (一般不用 )
     <div id="app">
         <h2>{{fullName}}</h2>
         <h2>{{fullName}}</h2>
     </div>
     <script>
         const app = new Vue({
             el: '#app',
             data: {
                 firstname: 'kobi',
                 lastname: 'James'
             },
             computed: {
                 fullName: {
                     set: function (newvalue) {
                         let names = newvalue.split(' ')
                         this.firstname = names[0]
                         this.lastname = names[1]
                     },
                     get: function () {
                         return this.firstname + ' ' + this.lastname
                     }
                 }
             }
         })
     </script>
    
    展开全文
  • vue计算商品总价使用 ---- 计算属性 注 命名规则: 属性名称,方法名称,变量名称 尽量使用小驼峰命名法 computed:{ totalPrice() { let totalPrice = 0 for (let i = 0; i< this.books.length; i++) { ...

    vue计算商品总价使用 ---- 计算属性

    注 命名规则: 属性名称,方法名称,变量名称 尽量使用小驼峰命名法

    computed:{
      totalPrice() {
        let totalPrice = 0
        for (let i = 0; i< this.books.length; i++) {
         totalPrice += this.books[i].price * this.books[i].count
       }
         return totalPrice
      }
    }
    

    循环中使用let与使用var的区别

    1. var
    var a = [];
    for (var i = 0; i<3;i++){
     a[i] = function() {
      console.log(i);
     };
    }
    
    结果:
     a[0](); // 3
     a[1](); // 3
     a[2](); // 3
    
    1. let
    var a = [];
    for (let i = 0; i < 3; i++){
    	a[i] = function () {
          console.log(i);
      };
    }
    
    结果:
     a[0](); // 0
     a[1](); // 1
     a[2](); // 2
    
    展开全文
  • vue计算属性

    2021-02-18 09:11:12
    vue计算属性 计算属性可以对数据进行简单的计算,再显示出来,对于methods来说,计算属性是有缓存的,如果数据不变,它会直接将缓存的数据显示出来 计算属性一般是没有set方法的,仅有get,只读属性 data:{ ...

    vue 的计算属性

    1. 计算属性可以对数据进行简单的计算,再显示出来,对于methods来说,计算属性是有缓存的,如果数据不变,它会直接将缓存的数据显示出来

    2. 计算属性一般是没有set方法的,仅有get,只读属性

       data:{
            message:'hello',
            fistName: 'FirstName',
            lastName: 'LastName'
          },
          computed : {
            //计算属性一般不会设置set方法,只读属性
            // fullName : {
            //   get : function (){
            //     return this.fistName + ' ' + this.lastName
            //   },
            //   set : function (newValue){
            //     // console.log('+++++++')
            //     const names = newValue.split(' ');  //以空格的形式分割,将每一部分保存在         //                                           names数组中
            //     this.fistName = names[0];
            //     this.lastName = names[1];
            //   }
            // }
            //一般简写为此形式
            fullName :  function (){
                return this.fistName + ' ' + this.lastName
              }
          }
      
    展开全文
  • Vue计算属性实现成绩单 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>成绩单统计</title> <script src="js/vue.js" type="text/...

    Vue计算属性实现成绩单

    代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>成绩单统计</title>
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<style type="text/css">
    			.gridtable{
    				font-family:verdana, arial, sans-serif;
    				font-size:11px;
    				color:#333333;
    				border-width: 1px;
    				border-color:#666666;
    				border-collapse: collapse;
    			}
    			.gridtable th{
    				border-width: 1px;
    				padding:8px;
    				border-style:solid;
    				border-color:#666666;
    				background-color: #dedede;
    			}
    			.gridtable td{
    				border-width: 1px;
    				padding:8px;
    				border-style:solid;
    				border-color:#666666;
    				background-color: #ffffff;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div id="app">
    			<table class="gridtable">
    				<tr>
    					<th>学科</th>
    					<th>分数</th>
    				</tr>
    				<tr>
    					<td>语文</td>
    					<td>
    						<input type="text" name="" id="" value="" v-model.number="Chinese" />
    					</td>
    				</tr>
    				<tr>
    					<td>数学</td>
    					<td>
    						<input type="text" name="" id="" value="" v-model.number="Math" />
    					</td>
    				</tr>
    				<tr>
    					<td>英语</td>
    					<td>
    						<input type="text" name="" id="" value="" v-model.number="English" />
    					</td>
    				</tr>
    				<tr>
    					<td>总分</td>
    					<td>
    						<input type="text" name="" id="" value="" v-model.number="sum" />
    					</td>
    				</tr>
    				<tr>
    					<td>平均分</td>
    					<td>
    						<input type="text" name="" id="" value="" v-model.number="average" />
    					</td>
    				</tr>
    			</table>
    		</div>
    		
    		<script>
    			var vm=new Vue({
    				el:"#app",
    				data:{
    					Chinese:100,
    					Math:100,
    					English:60
    				},
    				computed:{
    					sum:function(){
    						return this.Chinese+this.Math+this.English;
    					},
    					average:function(){
    						return Math.round(this.sum/3);
    					}
    				},
    				
    			})
    		</script>
    	</body>
    </html>
    
    

    在这里插入图片描述在这里述
    当我改变语文,数学·,英语的成绩,总分和平均分会随着实时变化,这就是Vue计算属性的特点。

    Vue计算属性的传参

    计算属性本质是一个方法,但是通常被当作一个属性来使用,一般不加()。但在实际开发中,如果需要给计算属性中的方法传参,就需要使用闭包传参的方法。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Evaluate</title>
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    		<div id="app">
    			{{add(2)}}
    		</div>
    		
    		<script type="text/javascript">
    			var vm =new Vue({
    				el:"#app",
    				data:{
    					number:1
    				},
    				computed:{
    					add(){
    						return function(index){
    							return this.number+index;
    						}
    					}
    				}
    			})
    		</script>
    	</head>
    	<body>
    	</body>
    </html>
    

    注意:

    • 计算属性本身不能像方法一样在括号里填写参数来达到传参的目的,需要在该方法体里写真正的方法,来接受参数。
    • 同理,计算属性方法体参数可省略,即本例子中add(){}和add(index){}均可


    计算属性的getter和setter

    计算属性通常用来获取数据(根据data的变化而变化),所以其默认只有getter,但需要时,Vue.js也提供setter功能。set方法与get方法先后顺序无关,并且set方法接受的参数为get方法的返回值。
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>Computed</title>
    		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		
    		<div id="app">
    			firstName:<input type="text" name="" id="" value="" v-model="first"/>
    			lastName:<input type="text" name="" id="" value="" v-model="last"/>
    			<p>fullName:<input type="text" name="" id="" value="" v-model="fullName"/></p>
    		</div>
    		<script type="text/javascript">
    			var vm=new Vue({
    				el:"#app",
    				data:{
    					first:"Jack",
    					last:"Jones"
    				},
    				computed:{
    					fullName:{
    						get:function(){
    							return this.first+" "+this.last
    						},
    						set:function(parameter){
    							var names=parameter.split(" ")
    							this.first=names[0]
    							this.last=names[names.length-1]
    						}
    					}
    				}
    			})
    		</script>
    	</body>
    </html>
    
    

    计算属性与方法的区别

    使用计算属性的这种方法可以确保代码只在必要的时刻执行,适合处理一些潜在资源密集型工作。但是,如果项目不具有缓存功能,则要使用methods,要根据实际情况而定。

    计算属性的特点如下:
    ①当计算属性的依赖发生变化时,会立即进行计算,并对计算结果进行自动更新。
    ②计算属性的求值结果会被缓存起来,以方便下次直接使用。
    ③计算属性适用于执行更加复杂的表达式,这些表达式往往太长或需要频繁的重复使用,所以不能在模板中直接使用。
    ④计算属性是data对象的一个扩展和增强版本。

    展开全文
  • 详解Vue计算属性

    2020-10-15 04:57:09
    主要介绍了Vue计算属性的相关知识,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
  • vue 计算属性

    2019-02-27 14:07:08
    计算属性 基本用法 ...例如:msg:hello vue,经过计算属性计算后,反转值为:vue hello; 如果此时msg被修改为:my name is vue, 那此时计算属性会监视原来的数据被更改,会重新计算结果为:vue is n...
  • Vue计算属性

    2020-10-13 18:32:48
    Vue计算属性 什么是计算属性? 首先,按照名称,计算属性是用来计算的 其次,他是个属性 因此,早vue 中,一般处理文本的计算方法叫做计算属性 所以,计算属性的引用一般都是取名属性的名字 下面的demo中,两个结果都是...
  • Vue_计算属性

    2020-07-04 22:46:48
    Vue 计算属性 什么是计算属性 计算属性的重点突出在 属性 两个字上(属性是名词),首先它是个 属性 其次这个属性计算 的能力(计算是动词),这里的 计算 就是个函数;简单点说,它就是一个能够将计算结果缓存...
  • Vue - 计算属性

    2020-08-24 10:16:12
    computed 计算属性中只有 方法(个人理解...什么是vue计算属性计算属性关键词: computed。 在Vue实例中 【关键词: computed】 所包含的内容 计算属性的作用是什么? 简化减少模板中大量的逻辑代码,提高代
  • Vuevue计算属性

    2020-10-10 12:32:06
    计算属性基本使用2.计算属性的setter和getter3.计算属性和methods的对比(缓存) 1.计算属性基本使用 1.引入:模板内(插值数据)的表达式非常便利,设计它们的初衷是用于简单运算的。 但如果在模板中放入太多的逻辑会...
  • vue计算属性

    2020-06-25 17:44:23
    computed: { fullname: function(){ console.log(‘fullname’) return this.firstname + ’ ’ + this.lastname }, vue计算属性存在缓存
  • Vue计算属性

    2017-07-07 10:31:00
    分针网每日分享:Vue计算属性 什么是vue计算属性? 个人理解:就是说这个属性是一个函数的返回值。函数的返回值作为一个属性。比如下面例子中的这个 reversedMessage属性。以及这个site属性,...
  • 计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 1.基本用法 --> <h2&...
  • Vue 计算属性

    2019-09-08 22:31:01
    构造器的 computed 选项,用于定义 Vue 实例的计算属性。 虽然模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。如果在模板中放入太多的逻辑会让模板过重且难以维护。例如: <div id="example"&...
  • 关于vue计算属性

    2020-08-14 20:29:34
    关于vue计算属性vue计算属性定义方法类似于方法的定义在computed内写入一个属性方法,在使用的时候可以看作是当作属性使用的计算属性的基本操作可以简单的定义一个属性来进行两个内容的合并computed:{ ...
  • Vue computed 计算属性

    2021-03-03 09:59:52
    Vue computed 计算属性 有的时候我们在html元素中数据并不是我们直接想要的,需要对数据进行处理,但是直接在html中拼写的话比较麻烦,而且很容易影响美观,这个时候就需要computed属性 代码如下 <body> <...
  • 在本篇文章里小编给大家分享的是关于Vue computed 计算属性代码实例,需要的朋友们可以参考下。
  • vue计算属性

    2019-01-22 16:57:39
    一、vue计算属性--computed: 依赖于data中的数据,只有相关数据变化才会重新求值; 属性调用,带有缓存功能; 比methods节省内存; &lt;p&gt;{{text}}&lt;/p&gt; computed:{ ...
  • vue计算属性

    2019-05-19 09:15:11
    vue计算属性详解——小白速会 一、什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: {{ message.split('').reverse().join(''...
  • vue计算属性的重点突出在 属性 两个字上(属性是名词),首先它是个 属性 其次这个属性计算 的能力(计算是动词),这里的 计算 就是个函数;简单点说,它就是一个能够将计算结果缓存起来的属性(将行为转化成了...
  • VUE计算属性

    2020-03-09 19:43:05
    VUE计算属性(可以写一个函数来讲计算值) 本案例为计算总分和平均分 计算属性:computed:{ } 和 data、methods 同级 HTML页面 ↓ <!DOCTYPE html> <html lang="en"> <head> <meta charset=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,233
精华内容 3,693
关键字:

vue属性计算

vue 订阅