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

    2020-10-22 14:09:55
    'HelloWorld', computed: { demoData3: { get: function () { console.log('111') return this.demoData1 }, set: function (val) { console.log('222') this.demoData1 = val } } }, data () { return { demoData1...
    <template>
      <div class="hello">
        测试1<input type="text" v-model="demoData1">
        测试2<input type="text" v-model="demoData2">
        测试3<input type="text" v-model="demoData3">
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      computed: {
        demoData3: {
          get: function () {
            console.log('111')
            return this.demoData1
          },
          set: function (val) {
            console.log('222')
            this.demoData1 = val
          }
        }
      },
      data () {
        return {
          demoData1: '',
          demoData2: ''
        }
      }
    }
    </script>
    

    改变demoData3:
    在这里插入图片描述
    改变demoData1:
    在这里插入图片描述

    展开全文
  • 通过例子演示vue计算属性set和get使用方法。

    功能说明:

    底部为缩略图,中间为缩略图对应的多张图片内容,类似标签页切换。右上角绿色区域为全选或取消选中,操作单一缩略图对应的所有图片,本文主要记录右上角区域的操作,利用到了计算属性的set和get方法。
    要求:
    1、勾选后当前展示的图像全部选中,取消勾选则当前全部图片取消选中;
    2、取消勾选某一张图片时,选中状态切换为未选中;
    3、切换不同缩略图时,验证对应图片是否全选,是则处于勾选状态,否则取消;
    4、点击发送时获取全部缩略图中已勾选的图像。
    在这里插入图片描述
    附上DEMO链接: DEMO

    HTML

    <div id="app">
            <div id="imageIdBox">
              <el-checkbox class="extra" v-model="isCheckAll"></el-checkbox>
              <div class="content">
                <el-checkbox-group v-model="checkImageList">
                  <el-row :gutter="10">
                    <el-col v-for="(image,index) in imageIdList" :key="index">
                      <el-checkbox :label="image">
                        <el-image :src="image" alt="" lazy></el-image>
                      </el-checkbox>
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </div>
              <div class="footer">
                <div class="pat-content">
                  <ul>
                    <li
                      v-for="(item,index) in imgList" :key="index"
                      @click="selectImageIdList(item)"
                    >
                      <el-image :src="item[0]" alt>
                        <div slot="placeholder" class="image-slot">
                          加载中
                        </div>
                      </el-image>
                    </li>
                  </ul>
                </div>
    
                <div class="btn">
                  <el-button type="primary" @click="sendImageId" :disabled="!checkImageList.length">发送</el-button>
                  <el-button type="primary" @click="checkImageList = []" :disabled="!checkImageList.length">取消选中</el-button>
                </div>
              </div>
            </div>
          </div>
    

    VUE

    new Vue({
          el: '#app',
          data: function() {
            return { 
              checkImageList: [],// 所有选中图像
              imageIdList:[], // 缩略图对应图像列表
              // 全部图像
              imgList:[
                [
                  "http://placehold.it/40x40?v=1",
                  "http://placehold.it/40x40?v=2",
                  "http://placehold.it/40x40?v=3",
                ],
                [
                  "http://placehold.it/50x40?v=1",
                  "http://placehold.it/50x40?v=21",
                  "http://placehold.it/50x40?v=3",
                  "http://placehold.it/50x40?v=4"
                ]
              ]
            }
          },
      methods:{
        selectImageIdList(item) {
          this.imageIdList = item;
        },
        sendImageId() {
          console.log(this.checkImageList)
        }
      },
      computed:{
        // 选中状态
        isCheckAll:{
        	// 当需要读取当前属性值是执行,根据相关数据计算并返回当前属性的值
            get:function() {
              // 验证序列是否全选
              let imageIdIndex = 0;
              for (let i = 0; i < this.imageIdList.length; i++) {
                for (let j = 0; j < this.checkImageList.length; j++) {
                  if (this.checkImageList[j] == this.imageIdList[i]) {
                    imageIdIndex++
                    break
                  }
                }
              }
              return imageIdIndex == this.imageIdList.length ? true : false
            },
            // 监视当前属性值的变化,当属性值发生变化时执行,更新相关的属性数据
            set:function(val) {
            // 触发等同于change的事件
              if (val == true) {
                this.imageIdList.forEach(item => {
                  this.checkImageList.push(item);
                })
                this.checkImageList = Array.from(new Set(this.checkImageList))
              } else {
                for (let i = 0; i < this.imageIdList.length; i++) {
                  for (let j = 0; j < this.checkImageList.length; j++) {
                    if (this.checkImageList[j] == this.imageIdList[i]) {
                      this.checkImageList.splice(j, 1)
                      break
                    }
                  }
                }
              }
            }
          }
      }
        })
    
    展开全文
  • 绝大多数情况下,我们只会用默认的getter 方法来读取一个计算属性,在业务中很少用到setter,所以在声明一个计算属性时,可以直接使用默认的写法,不必将getter setter 都声明。 但在你需要时,也可以提供一个...

    每一个计算属性都包含一个getter 和一个setter ;

    绝大多数情况下,我们只会用默认的getter 方法来读取一个计算属性,在业务中很少用到setter,所以在声明一个计算属性时,可以直接使用默认的写法,不必将getter 和setter 都声明。

    但在你需要时,也可以提供一个setter 函数, 当手动修改计算属性的值就像修改一个普通数据那样时,就会触发setter 函数


     

    展开全文
  • computed计算属性中包含了set和get两个方法(回调函数) get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值 set回调函数:监视当前属性值发生改变时调用,更新相关的属性值 计算属性的...

    computed计算属性中包含了set和get两个方法(回调函数)

    get回调函数: 当需要读取当前属性值时调用,根据相关的数据计算并返回当前属性的值

    set回调函数:监视当前属性值发生改变时调用,更新相关的属性值

    在这里插入图片描述在这里插入图片描述计算属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算,否则就是多次调用,但只会计算第一次,其他次调用的计算结果采用缓存的结果。注意,如果某个依赖 (比如非响应式属性) 在该实例范畴之外,则计算属性是不会被更新的。

    展开全文
  • vue 计算属性 get 和set 案例

    千次阅读 2018-09-11 09:25:28
    计算属性默认只有 get ,不过在需要时你也可以提供一个 set: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&...
  • vue 计算属性 get 和set

    千次阅读 2018-01-25 19:07:04
    计算属性是什么:vue文档里是这么说的,模板中绑定太多的逻辑会让模板过重且难以维护。 换句话说,就是可以自己设置值...就是计算属性中的默认值get。那set又是什么鬼? b的值是基于a的变化而变化的,那么直接修改b
  • vue computed计算属性get和set函数

    千次阅读 2018-11-26 10:42:41
    get和set都是回调函数 什么是回调函数:1/你定义的 2/你没有调用 3/但最终执行了 关于回调函数需要知道的两个问题:1/什么时候调用 2/用来做什么 const vm = new Vue { data: { firstName; ‘A’, ...
  • computed中计算属性get和set方法的使用

    千次阅读 2018-09-12 08:36:44
  • vue计算属性computed中get() set() 的使用方法 简单示例 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body&...
  • </script> </body> 毫无疑问,效果如下: 我们可以为计算属性中的fullName设置一个对象,对象里面包含get和set方法: <body> <div id="app"> {{fullName}} </div> <script> var vm = new Vue({ el: '#app', data: {...
  • //: Playground - noun: a place where people can play// 1.Swift中类可以使用 计算属性,即使用get和set来间接获取/改变其他属性的值class Calcuator { var a:Int = 1 var b:Int = 1 var sum:Int { get{ ...
  • 关于computed计算属性的内容 可以移步到这里查看,这里就不再啰嗦 https://blog.csdn.net/soulwyb/article/details/86228326 get: 在页面获取计算属性内容的时候调用。代码示例: ...计算属性get方法和set...
  • Vue之computed(计算属性)详解get()、set()

    万次阅读 2018-08-09 10:21:02
    1.在computed属性对象中定义计算属性的方法,在页面中使用{{方法名}}来显示计算的结果。 2.通过getter\setter实现对属性数据的显示监视,计算属性存在缓存,多次读取只执行一次getter计算。 &lt;div id=&...
  • vue计算属性computed中的get和set使用

    千次阅读 2020-04-18 14:35:32
    //什么时候执行:初始化显示/ 相关的data属性发生变化 fullName1: {//计算属性中的get方法,方法的返回值就是属性值 get() { return this.firstName + '---' + this.lastName }, set(val) { } }, fullName3: { get()...
  • vue计算属性set()、get()用法

    千次阅读 2019-05-06 11:53:12
    1.在computed属性对象中定义计算属性的方法,在页面中使用{{方法名}}来显示计算的结果。 2.通过getter\setter实现对属性数据的显示监视,计算属性存在缓存,多次读取只执行一次getter计算。 <div id="demo">...
  • vue计算属性get和set方法)案例

    千次阅读 2018-07-11 15:02:09
    计算属性翻转值:{{reverse}}  @click="setSeverseStr()">点击调用set方法 <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src="js/vue.js" ></...
  • Vuejs computed set get计算属性

    千次阅读 2017-09-05 18:39:54
    直接贴代码,看注释 ...-- 设置计算属性的绑定字段,即reversedMessage的计算属性绑定到此输入框 --> <!-- 输入框中内容变化会调用相应的getter, setter计算属性 --> <input v-model="reversedMessa...
  • 计算属性get和set的理解

    千次阅读 2018-02-10 11:47:47
  • 经常看到有朋友提到类似:对类中的属性使用set/get方法的作用?理论的回答当然是封闭性之类的,但是这样对我们有什么作用呢?为什么要这样设计?我直接使用属性名来访问不是更直接,代码更简洁明了吗?下面我们就来...
  • 在这个属性中可以定义过滤器,一般用于给视图中的data进行格式化输出。 &lt;template&gt; &lt;div&gt; &lt;p&gt;{{msg}}&lt;/p&gt; &lt;!--使用过滤器--&gt; &lt;p...
  • Java 对类中的属性使用set/get方法的意义用法

    万次阅读 多人点赞 2015-10-27 21:29:21
    java 中对类中的属性使用set/get方法的意义用法 经常看到有朋友提到类似:对类中的属性使用set/get方法的作用?理论的回答当然是封闭性之类的,但是这样对我们有什么作用呢?为什么要这样设计?我直接使用属性...
  • 原文:http://coolketang.com/staticCoding/5a9925ad9f5454507417fc90.html1. get和set关键词被称为计算属性。它的目的是在取值赋值时,执行里面的代码。本节课将为你讲解这两个关键词的使用方法。 2. 首先定义一...
  • 经常看到有朋友提到类似:对类中的属性使用set/get方法的作用?理论的回答当然是封闭性之类的,但是这样对我们有什么作用呢?为什么要这样设计?我直接使用属性名来访问不是更直接,代码更简洁明了吗?下面我们就来...
  • 经常看到有朋友提到类似:对类中的属性使用set/get方法的作用?理论的回答当然是封闭性之类的,但是这样对我们有什么作用呢?为什么要这样设计?我直接使用属性名来访问不是更直接,代码更简洁明了吗?下面我们就来...
  • 属性set get willSet didSet ?!可空属性

    千次阅读 2016-04-21 09:40:38
    计算属性的赋值方法,设置属性的时候调用 get 计算属性的读取方法,取属性值得时候调用 willSet(newValue) 监视属性的方法,在属性值将要改变的时候调用,参数附带即将改变的值 didSet(oldValue) 监视属性的方法,...
  • get: 根据其它相关属性动态计算当前属性值 ...底层会自动把data中的属性名称给与组件对象,并且添加set和get方法,从而操作这个属性值的变化,所以可以直接使用this.name调用,这里的set方法不仅起...
  • 在字段和属性中,属性具有的一些特性,关于set和get的操作 课本实例: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ConsoleApplication1 { class...
  • swift学习之set和get方法

    千次阅读 2016-08-25 17:11:35
    在swift 中get,set被称之为“计算属性”,它用来间接获取/改变其他属性的值。 - set 和get 是针对 计算变量(Calculated property ) 是不可以赋值的 - 普通的存储变量(storage property)才是可以赋值的set和get...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 246,291
精华内容 98,516
关键字:

计算属性set和get如何使用