精华内容
下载资源
问答
  • vue计算属性写法2

    2021-02-20 15:21:55
    <template> <div> <h2>{{msg}}</h2> <p>新闻ID:{{$route.params.newsId}}</p> <p>新闻标题:{{$route.params.newsTitle}}<...inputtype="text"placeholder="请输...

    <template>

        <div>

            <h2>{{ msg }}</h2>

            <p>新闻ID:{{ $route.params.newsId}}</p>

            <p>新闻标题:{{ $route.params.newsTitle}}</p>

            <label>姓:<input type="text" placeholder="请输入姓氏" v-model="firstName"/></label>

            <label>名:<input type="text" placeholder="请输入名称" v-model="lastName"/></label>

            <label>姓名:<input type="text" placeholder="请输入名字" v-model="fullNameOne"/></label>

            <p></p>

            <label>姓名:<input type="text" placeholder="请输入名字" v-model="fullNameTwo"/></label>

        </div>

    </template>

    <script>

    export default {

      name: 'Params',

      data () {

        return {

          msg: 'params page',

          firstName: '',

          lastName: '',

          fullNameThree: ''

        }

      },

      computed: {

        fullNameOne: {

          get () {

            return this.firstName + '.' + this.lastName

          }

        },

        fullNameTwo: {

          get: function () {

            console.log(`调用了fullnametwo的get方法`)

            return this.firstName + '.' + this.lastName

          },

          set: function (value) {

            console.log(`调用了fullNameTwo的set方法,值:${value}`)

            let names = value.split('.')

            console.log(names)

            this.firstName = names[0]

            this.lastName = names[1]

          }

        }

      }

    }

    </script>

     

    展开全文
  • vue计算属性-完整写法 目标: 计算属性也是变量, 如果想要直接赋值, 需要使用完整写法 语法: computed: { "属性名": { set(值){ }, get() { return "值" } } } <template> <div> 名字: ...

    vue计算属性-完整写法

    目标: 计算属性也是变量, 如果想要直接赋值, 需要使用完整写法

    语法:

    computed: {
        "属性名": {
            set(){
                
            },
            get() {
                return "值"
            }
        }
    }
    
    <template>
      
      <div>
          名字:
          <input v-model="name" type="text">
      </div>
    </template>
    
    <script>
    export default {
        // computed 属性也可以绑定到 v-model 中
    computed: {
            // 这种 name (){} 其实是  name:{ get(){}}  的简写
            // name(){}
            // return "匿名"
        name:{
            // 设置
            set(val){
            console.log('修改了name值',val);
            },
            // 获取
            get(){
            return "匿名"
            }
        }
    }
    }
    </script>
    
    <style>
    
    </style>
    

    总结: 想要给计算属性赋值, 需要使用set方法

    展开全文
  • vue计算属性

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

    vue计算属性详解——小白速会
    一、什么是计算属性

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:

    {{ message.split('').reverse().join('') }}
    这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理。

    二、计算属性的用法

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

    我们把上面的例子用计算属性的方式重写一下

    Original message: "{{ message }}"

    Computed reversed message: "{{ reversedMessage }}"

      //我们把复杂处理放在了计算属性里面了
    复制代码 var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }); 复制代码 结果:

    Original message: “Hello”

    Computed reversed message: “olleH”

    除了上例简单的用法,计算属性还可以依赖多个Vue 实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。

    计算属性还有两个很实用的小技巧容易被忽略:一是计算属性可以依赖其他计算属性; 二是计算属性不仅可以依赖当前Vue 实例的数据,还可以依赖其他实例的数据,例如:

    <div id="app1"></div>
    <div id="app2">{{ reverseText}}</div>
    

    复制代码
    var app1 = new Vue({
    el: ‘#app1’,
    data: {
    text: ‘computed’
    }
    });

    var app2 = new Vue({
    el: ‘#app2’,
    computed: {
    reverseText: function(){
    return app1.text.split(’’).reverse().join(’’); //使用app1的数据进行计算
    }
    }
    });
    复制代码

    每一个计算属性都包含一个getter 和一个setter ,我们上面的两个示例都是计算属性的默认用法, 只是利用了getter 来读取。

    在你需要时,也可以提供一个setter 函数, 当手动修改计算属性的值就像修改一个普通数据那样时,就会触发setter 函数,执行一些自定义的操作,例如:

    复制代码
    var vm = new Vue({
    el: ‘#demo’,
    data: {
    firstName: ‘Foo’,
    lastName: ‘Bar’
    },
    computed: {
    fullName: {
    // getter
    get: function () {
    return this.firstName + ’ ’ + this.lastName
    },
    // setter
    set: function (newValue) {
    var names = newValue.split(’ ');
    this.firstName = names[0];
    this.lastName = names[names.length - 1];
    }
    }
    }
    });
    //现在再运行 vm.fullName = ‘John Doe’ 时,setter 会被调用,vm.firstName 和 vm.lastName 也会相应地被更新。
    复制代码
    绝大多数情况下,我们只会用默认的getter 方法来读取一个计算属性,在业务中很少用到setter,所以在声明一个计算属性时,可以直接使用默认的写法,不必将getter 和setter 都声明。

    三、计算属性缓存

    上面的例子,除了使用计算属性外,我们也可以通过在表达式中调用方法来达到同样的效果,如:

    {{reverseTitle()}}
    // 在组件中 methods: { reverseTitle: function () { return this.title.split('').reverse().join('') } } 我们可以将同一函数定义为一个方法而不是一个计算属性,两种方式的最终结果确实是完全相同的。只是一个使用reverseTitle()取值,一个使用reverseTitle取值。

    然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

    这就意味着只要 title还没有发生改变,多次访问 reverseTitle计算属性会立即返回之前的计算结果,而不必再次执行函数。

    举个小例子:

        <div>{{reverseTitle}}</div>
        <div>{{reverseTitle1()}}</div>
        <button @click="add()">补充货物1</button>
        <div>总价为:{{price}}</div>
    

    复制代码
    computed: {
    reverseTitle: function(){
    return this.title.split(’’).reverse().join(’’)  //而使用计算属性,只要title没变,页面渲染是不会重新进这里来计算的,而是使用了缓存。
    },
    price: function(){
    return this.package1.countthis.package1.price+this.package2.countthis.package2.price
    }
    },
    methods: { //对象的方法
    add: function(){
    this.package1.count++
    },
    reverseTitle1: function(){
    return this.title.split(’’).reverse().join(’’)  //点击补充货物,也会进这个方法,再次计算。不是刷新,而是只要页面渲染,就会进方法里重新计算。
    }
    },
    复制代码
    相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。

    我们为什么需要缓存?假设我们有一个性能开销比较大的的计算属性 A,它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。

    如果没有缓存,我们将不可避免的多次执行 A 的 getter!如果你不希望有缓存,请用方法来替代。

    展开全文
  • Vue 计算属性

    2021-03-21 22:49:18
    vue中一些数据经常依赖于别的数据做出改变,且改变的逻辑也较复杂,这个时候就需要用到计算属性computed。通俗来说就是当前数据不是确定的,要经常做出改变,而这个改变是其他数据改变导致的。 简单使用 <div ...

    前言

    人生如逆水行舟,不进则退

    简介

    在vue中一些数据经常依赖于别的数据做出改变,且改变的逻辑也较复杂,这个时候就需要用到计算属性computed。通俗来说就是当前数据不是确定的,要经常做出改变,而这个改变是其他数据改变导致的。

    简单使用

    <div id="app">
      <h2>{{firstName}} {{lastName}}</h2>
      <h2>{{firstName+" "+lastName}}</h2>
      <h2>{{getFullName()}}</h2>
      <h2>{{fullName}}</h2> 
    </div>
    <script>
      const app = new Vue({
        el:"#app",
        data:{
          firstName:'Key',
          lastName:'Ting'
        },
        computed:{
          //不加动词,这是计算属性,那么最好以属性命名,这里的写法是计算属性的简写
          fullName(){
            return this.firstName+" "+this.lastName
          }
            
        },
        methods:{
          getFullName(){
            return this.firstName+" "+this.lastName
          }
        }
      })
    </script>
    </body>
    </html>
    
    
    <div id="app">
      <h2>总价格:{{totalPrice}}</h2>
    </div>
    <script>
      const app = new Vue({
        el:"#app",
        data:{
          books:[
            {id: 1001, name: 'Unix编程艺术',price: 119},
            {id: 1002, name: '代码大全',price: 105},
            {id: 1003, name: '深入理解计算机原理',price: 99},
            {id: 1004, name: '现代操作系统',price: 109}
          ]
        },
        computed:{
          totalPrice(){
            //filter/map/reduce 高级用法
            let result = 0
            for(let i=0;i < this.books.length;i++){
              result += this.books[i].price
            }
            return result
          }
        }
      })
    </script>
    
    

    setter和getter

    • 每个计算属性都包括一个getter和一个setter
    • 语法糖情况下,表示getter,取数据
    • setter一般不用,所以我们常称计算属性为只读属性
    <div id="app">
      <h2>{{fullName}}</h2>
    </div>
    <script>
      const app = new Vue({
        el:"#app",
        data:{
          firstName:'Key',
          lastName:'Ting'
        },
        computed:{
          //不加动词,这是计算属性,那么最好以属性命名
          //语法糖,简写
          // fullName(){
              // `this` 指向 app 实例
          //   return this.firstName+" "+this.lastName
          // }
            //规范格式
          fullName:{
            //计算属性中set方法一般不使用,只是一个只读属性
            set(newValue){
              console.log('-------------',newValue);
              const names = newValue.split(' ');
              this.firstName = names[0];
              this.lastName = names[1];
            },
            get(){
              return this.firstName+" "+this.lastName
            }
          }
        }
      })
    </script>
    
    

    计算属性和methods对比

    methods和computed看起来都可以实现我们的功能,那么为什么还要多一个计算属性这个东西呢?

    官方:两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

    原因:计算属性会进行缓存,如果多次使用,计算属性只会调用一次,极大提高了性能除非原属性发生改变,才会重新调用计算属性,更改属性值

    <div id="app">
    <!--  1.直接拼接:语法过于繁琐-->
      <h2>{{firstName}} {{lastName}}</h2>
    <!--  2.通过定义methods 每一个都会调用getfullname函数,如果很复杂,性能消耗是很大的 -->
      <h2>{{getFullName()}}</h2> 
      <h2>{{getFullName()}}</h2>
      <h2>{{getFullName()}}</h2>
    <!--  3.通过computed 只会调用第一次,除非原属性发生改变,才会重新调用计算属性,更改属性值 -->
      <h2>{{fullName}}</h2>
      <h2>{{fullName}}</h2>
      <h2>{{fullName}}</h2>
    </div>
    <script>
      const app = new Vue({
        el:"#app",
        data:{
          firstName:'kebe',
          lastName:'bryant'
        },
        methods:{
          getFullName() {
            console.log('getFullName');
            return this.firstName+' '+this.lastName;
          }
        },
        computed:{
          fullName(){
            console.log('fullName');
            return this.firstName+' '+this.lastName;
          }
        }
      })
    </script>
    
    
    展开全文
  • Vue计算属性

    2021-07-20 19:59:05
    (2)计算属性是放在vue实例的computed中定义,与methods类似,都是定义函数。 (3)计算属性定义在computed中,调用时使用mustache语法调用且后面不跟() <div id="app"> <h2>{{firstName+ ' ' + lastName...
  • 1.基本使用,firstName+lastName 2.复杂使用(遍历data里面的book数组,把所有book的价格加起来并输出) 3.setter和getter 运行最开始是右键→检查→console输入app.fullName='ha...计算属性和methods的对比 用计算属性
  • 一些初学者可能对计算属性和侦听属性的使用场景感到困惑不解,本文主要介绍两者的用法、使用场景及其两者的区别。 本文的代码请猛戳github博客,纸上得来终觉浅,大家动手多敲敲代码! 计算属性 1.介绍 计算属性是...
  • vue计算属性 在模板中放入大量的逻辑会让模板过重且难以维护 计算属性下所有函数可以放到computed中 class与style绑定 原始写法 v-bind:class 缩写 :class class绑定的三种形式 style的三种绑定形式 属性值为...
  • vue 计算属性

    2021-01-04 17:08:07
    计算属性的简单用法 在模板中可以直接通过插值语法显示data数据 但是在哪...计算属性的完整写法 一般是没有set 方法 没有set方法 是只读属性 不能改 不需要加小括号 计算属性 是计算后的结果 最终还是一个属性 c
  • vue计算属性详解

    2019-03-19 21:49:01
    一、什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让...这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性compute...
  • vue3 计算属性写法

    千次阅读 2020-12-03 12:17:28
    <template> <div class="container"> <p>{{count}}</p> <p>{{double}}<...button class="btn btn-primary" @click="add" type="submit">...script lang="ts".
  • 计算属性 我们有时候会在模板中绑定表达式来做简单的数据处理,但是如果表达式太长,就会变得臃肿难以维护。 比如以下代码 <div> {{text.split(',').reverse().join(',')}} </div> 表达式里面包含了3...
  • vue 计算属性 2020/8/27

    2020-08-27 17:34:01
    vue 计算属性 computed 计算属性绑定的 computed 写法类似于函数,但不是函数 特别注意 get 和 set 的运行
  • 计算属性:可以把写在html中繁杂的计算代码提取出来,专门写在计算属性中来,直接饮用计算属性中的即可,可以实时的接收到数据的变化,也可以实时的展示数据的变化计算属性写法看起来和方法的写法很相似,使用哪一...
  • vue 计算属性传参数

    千次阅读 2020-06-12 00:08:49
    vue 计算属性传参数 <template> <div class="box"> <div>{{test}}</div> <!-- 报错 --> <!-- <div :class="test1(1)">{{test}}</div> --> <!-- 那么计算...
  • Vue计算属性详解

    2019-10-21 14:46:52
    一、什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板...这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性comput...
  • 1.6、VUE计算属性

    千次阅读 2019-04-17 18:53:07
    什么是计算属性 如下,对于任何复杂逻辑,应当使用计算属性。 <div id="example"> {{ message.split('').reverse().join('') }} </div> <!DOCTYPE html> <html> <head> <meta...
  • vue计算属性 计算属性可以帮助我们简化代码,做到...首先看一下计算属性的基本写法(摘自官网) var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: fu...
  • 3-Vue计算属性

    2020-03-04 22:14:48
    第一种简单写法的fullname计算属性本质: set()方法一般不用,所以不写;所以计算属性可以说是只读属性 4、计算属性与methods对比: 两者都可以实现计算操作,但是如果数据没有发生变化,多次使用计算属性,因为...

空空如也

空空如也

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

vue计算属性写法

vue 订阅