Vue计算属性computed的setter用法

最新推荐文章于 2022-07-25 17:30:27 发布
最新推荐文章于 2022-07-25 17:30:27 发布
阅读量797 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010234868/article/details/120079712
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul li {
        list-style: none;
        padding: 10px 5px;
        margin: 15px;
        border-radius: 5px;
      }
      .active {
        background-color: #0ff;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <audio :src="musicSrc" autoplay controls></audio>
      <ul>
        <li v-for="(item,index) in musicData" @click="clickHandler(index)" :class="{active: currentIndex === index}">{{item.id}}--歌名：{{item.name}}--地址：{{item.src}}</li>
      </ul>
    </div>

    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
      var musicData = [
        {
          id: 1,
          name: 'John',
          src: 'D:/CloudMusic/Blaxy Girls - If You Feel My Love (Chaow Mix).mp3'
        },
        {
          id: 2,
          name: 'David',
          src: 'D:/CloudMusic/Bruno Mars - Marry You.mp3'
        },
        {
          id: 3,
          name: 'Lucy',
          src: 'D:/CloudMusic/Federica Camba - Cosi tanto.mp3'
        },
        {
          id: 4,
          name: 'Lily',
          src: 'D:/CloudMusic/Hugh Grant; Drew Barrymore - Way Back Into Love (Demo).mp3'
        }
      ];
      new Vue({
        el: '#app',
        data() {
          return {
            musicData: musicData,
            currentIndex: 0
          };
        },
        methods: {
          clickHandler: function (index) {
            this.musicSrc = index;
          }
        },
        computed: {
          // // 计算属性默认只有getter
          // musicSrc: function () {
          //   return this.musicData[this.currentIndex].src;
          // }
          musicSrc: {
            set: function (newV) {
              this.currentIndex = newV;
            },
            get: function () {
              return this.musicData[this.currentIndex].src;
            }
          }
        }
      });
    </script>
  </body>
</html>

 

每一天，每一步
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2 computed中的setter
白瑕 的博客
10-02 2378
Vue2computed中setter的使用方法, 在什么情况下使用setter, 对于setter的一些个人见解.
Vue computed 计算属性代码实例
10-15
计算属性是在 Vue 实例的 `computed` 对象中定义的属性。它们本质上是返回值的方法，但通常我们像访问普通属性一样去引用它们，而不是通过调用函数的方式。例如，在给定的代码示例中，`fullname` 就是一个计算属性...
computed_setter的用法
飞上云端看彩虹
11-22 1640
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list...
Vue computed setter
代元培
10-15 419
　　computed属性默认只有getter，不过在需要时你也可以提供一个setter： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> </head&gt
vue计算属性computed的getter和setter
weixin_44293690的博客
12-16 467
简单介绍 在 Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值，因此在 computed 中可以分成 getter（读取） 和 setter（设值），一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值。 vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写，如下代码： <div id="demo">{{ fullName }}</div> var vm = new V
计算属性的 setter
lixiaonaaa的博客
02-02 528
计算属性默认只有 getter，不过在需要时你也可以提供一个 setter。 例如，要实现输入框的双向绑定 姓： <input type="text" placeholder="first name" v-modal="firstName"> 名： <input type="text" placeholder="last name" v-modal="lastName"> 姓名： <input type="text" placeholder="full name" ..
Vue计算属性的Setter
林见鹿鸣
07-25 372
补充vue官方文档
vue计算属性及使用详解
08-27
下面是关于 Vue 计算属性的详细解释和使用方法。 什么是计算属性 计算属性是指在模板中使用的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如，以下是...
Vue计算属性的学习笔记
08-31
Vue.js 是一款流行的前端JavaScript框架，它提供了许多强大的特性，其中计算属性（Computed Properties）是其核心特性之一。计算属性允许我们在组件中定义基于其他数据动态计算出的新属性，而无需在模板中进行复杂的...
详解Vue之计算属性
10-15
当你在Vue实例中声明一个计算属性，Vue会自动跟踪这个属性的依赖，也就是计算属性内部使用的数据。一旦这些依赖发生变化，Vue会重新执行计算属性的函数，并更新对应的视图。 **计算属性的使用方式：** 在Vue实例的`...
Vue的Computed中的setter的使用
热门推荐
mapbar_front的博客
05-26 1万+
背景说明 vue中的计算属性，是根据数据data的变化，有自动更新属性的效果。 但是有时候，我们需要改变计算属性，也就是在计算属性的基础上，给它进行赋值，这个时候，我们就用到了setter。 计算属性的getter和setter。 通常情况下，一个计算属性，通常默认有getter。基本写法如下： computed: { choicedList: function () { ...
（16）计算属性的 setter
Java田根旺
02-04 955
一、计算属性的setter介绍 计算属性默认只有 getter，Vue.js 也允许给计算属性设置setter 。 示例一：默认书写方式 <body> <div id="app"> <p>{{ fullName }}</p> </div> <script src="../01.vue.js入门/js/vue-2.6.14.js"></script> <script> n
vue.js计算属性setter
时光足迹
10-08 7819
计算属性默认只是 getter，不过在需要时你也可以提供一个 setter： // ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function
Vue —— 计算属性 setter
HuoZhiyan 的博客
04-02 1054
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-.
计算属性中setter属性的用法？
qq_46582421的博客
03-01 647
计算属性默认只有getter,不过在需要时也可以使用setter。默认情况下是使用getter读取的。 比如： 当您要收到去修改计算属性的值，向修改一个普通数据那样时，就会触发setter，执行一些自定义的操作。 比如： 当运行vm.fullName='杜甫‘时，setter会被调用，vm.firstName和vm.lastName也会相应地被更新。 ...
计算属性的setter和getter
vfjcgg的博客
06-05 197
计算属性的setter和getter 每一个计算属性都包含一个getter和setter 为什么计算属性不是按照函数的方式进行使用而是按照属性的方式进行使用？ 计算属性一般是没有set方法的，只读属性，我们一般将set方法删除掉 代码段1： fullName: function() { return this.firstName + ' ' + this.lastName; } 代码段2： fullName: {
computed setter
weixin_30840573的博客
08-01 108
computed setter computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ： 实例 4 var vm = new Vue({ el: '#app', data: { name: 'Google', url: 'http://www.google.com' }, computed: { ...
vue中computed以及getter和setter
Sunshinedada的博客
12-02 2854
vue中computed以及getter和setter Vue 中，computed 的属性可以被视为是 data 一样，可以读取和设值。 因此在 computed 中可以分成 getter（读取） 和 setter（设值）， 一般情况下是没有 setter 的，computed 预设只有 getter ，也就是只能读取，不能改变设值。 vue.js计算属性默认只有 getter，因为是默认值所以我们也常常省略不写，如下代码： <div id="demo">{{ fullName }}</
vue的计算属性做setter
最新发布
09-23
在Vue中，计算属性可以通过定义getter和setter来实现。getter用于获取计算属性的值，而setter用于给计算属性赋值。通过setter，我们可以在给计算属性赋值时触发一些特定的逻辑或操作。 在Vue中定义计算属性的setter方法可以通过以下方式实现： ```javascript computed: { fullName: { get() { return this.firstName + ' ' + this.lastName; }, set(value) { const names = value.split(' '); this.firstName = names[0]; this.lastName = names[1]; } } } ``` 在上述示例中，`fullName`是一个计算属性，它由`firstName`和`lastName`组合而成。在getter中，我们将`firstName`和`lastName`拼接起来返回。而在setter中，我们将接收到的新值进行拆分，并将拆分的结果赋值给`firstName`和`lastName`。 通过给计算属性定义setter，我们可以通过修改`fullName`的值来同时修改`firstName`和`lastName`，从而实现双向绑定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值