Vue-计算属性完整写法

于 2024-03-28 09:00:00 发布
阅读量119 收藏
点赞数 3
分类专栏： 前端学习之vue 文章标签： vue.js 前端 javascript 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jsjsjejsj/article/details/137052751
版权 

<!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>
    input {
      width: 30px;
    }
  </style>
</head>
<body>

  <div id="app">
    姓：<input type="text" v-model="firstName"> +
    名：<input type="text" v-model="lastName"> =
    <span>{{ fullName }}</span><br><br>
    
    <button @click="changeName">改名卡</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        firstName: '刘',
        lastName: '备',
      },
      methods: {
        changeName () {
          this.fullName = '黄忠'
        }
      },
      computed: {
        // 完整写法 → 获取 + 设置
        fullName: {
          get () {
            return this.firstName + this.lastName
          },
          // (2) 当fullName计算属性，被修改赋值时，执行set
          //     修改的值，传递给set方法的形参
          set (value) {       
            this.firstName = value.slice(0, 1)
            this.lastName = value.slice(1)
          }
        }
      }
    })
  </script>
</body>
</html>

可乐不加冰呀
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中的计算属性
m0_58974838的博客
06-11 463
在模板中使用插值表达式时，可以书写简单的表达式，但是一旦表达式比较繁琐时就不太合适了，这是就可以用计算属性，计算属性就是在Vue实例中的computed中
Vue——计算属性
最新发布
AYBBZXY的博客
01-21 1291
文章目录计算属性computed 计算属性 vs methods 方法计算属性完整写法综合案例：成绩案例 计算属性 概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算 语法: ①声明computed配置项中，一个计算属性对应一个函数 ②使用起来和普通属性一样使用{{ 计算属性名 }} (平时声明属性是往data中放的，现在要往对应的computed中放👇) <script> computed:{ 计算属性名 () { 基于现有数据，编写求职逻辑 return 结
Vue的计算属性
qq_50260510的博客
06-07 4044
Vue的计算属性
vue计算属性
qq_52963857的博客
06-15 2239
vue计算属性，1.1 computed1.2 缓存1.3 vue计算属性-完整写法1.4 案例-小选影响全选1.5 案例-全选影响小选1.6 案例-反选2. vue侦听器2.1 watch2.2 深度侦听和立即执行2.3 案例-品牌管理(数据缓存)
vue中的计算属性简写与完整写法
一个韩韩韩
08-03 2223
1、简写与全写的区别 vue中的计算属性分为简写和完整写法,简写的方式是不考虑计算属性的修改的,而完整的写法是考虑计算属性的读与写的 2、vue2下计算属性的写法 <input type="text" v-model="oneName"> <br> <input type="text" v-model="lastName"> <p>{{fullName}}</p> <p>{{testName}}</p> <in
vue3-vite-ts:学习vue3的新属性的同时，尝试ts的写法
03-08
5. **Setup 函数**：每个Vue3组件都有一个setup()函数，它是组件生命周期的起点，可以在这里初始化状态、监听事件、注册计算属性等。它是Composition API的核心部分。 接下来，我们来看看TypeScript在Vue3中的应用...
vue计算属性+vue中class与style绑定(推荐)
11-21
vue计算属性 在模板中放入大量的逻辑会让模板过重且难以维护 计算属性下所有函数可以放到computed中 class与style绑定 原始写法 v-bind:class 缩写 :class class绑定的三种形式 style的三种绑定形式 属性值为...
Vue v-bind动态绑定class实例方法
10-15
在Vue中，`v-bind`指令是用于动态地绑定属性到元素。在这个特定的场景中，我们关注的是如何使用`v-bind`来动态绑定`class`，这是一个非常实用的功能，允许我们在运行时根据数据的变化改变元素的CSS类。 动态绑定`...
vue - vue基础-vue核心内容（2）.doc
07-08
Vue.js 是一款流行的前端JavaScript框架，用于构建用户...以上就是Vue基础中的核心内容，包括数据响应、计算属性、样式绑定、条件渲染和列表渲染的详细解析。掌握这些概念和用法，将有助于你更好地理解和应用Vue.js。
在Vue-cli里应用Vuex的state和mutations方法
01-19
首先，必须安装vuex的依赖 npm install vuex –save-dev 创建专属vuex的文件夹和store.js: store.js里引入并应用插件vuex ...需要用到计算属性computed和vuex的mapState:(注释的写法也可以，但是mapSta
Vue - 计算属性
热门推荐
小海的博客
11-01 5万+
1.vue计算属性-computed 一个数据, 依赖另外一些数据计算而来的结果 场景: 一个变量的值, 需要用另外变量计算而得来 语法: computed: { "计算属性名" () { return "值" } } 注意1: 计算属性和data属性都是变量-不能重名. 用法和data相同 注意2: 函数内变量变化, 会自动重新计算结果返回 例子: 需求: 需求1: 求2个数的和显示到页面上 需求2: 字符串翻转 <template> &l
vue - 计算属性的基本使用方法及完整写法（setter和getter）
asfcyg的博客
06-20 8253
一. 计算属性的基本使用 计算属性虽然书写时是方法的形式，但是本质是属性，所以起名时按照属性的起名规则，应为名词 data(){ firstName:'aaa', lastName:'bbb' } computed:{ fullName(){ return this.firstName+' '+this.lastName } } <h2>{{fullName}}</h2> 二. 计算属性的复杂操作 计算书的总价格 data: { book
08、VUE计算属性
执手天涯@的博客
03-08 4616
1、计算属性简介 在原生的JavaScript中我们需要一个来自不同数的和的变量， 我们会使用let num=a+b:这种写法，但是当a和b发生改变的 时候，num并不会自动修改，在vue中我们提供了计算属性 可以很好的解决这个问题。 2、计算属性的语法 在vue的配置项中添加 computed:{ "计算属性名" () { return "值" } } 3、计算属性的使用 <template> <div> <!-- 调用计算属性 -->
vue的计算属性computed
weixin_48357279的博客
05-13 5231
计算属性的应用场景 从已有的数据A中计算等到的新的数据B，使用计算属性 如果一个结果需要依赖data中的数据，但是需要经过一些逻辑处理，才能得到你想要的数据。此时就可以使用计算属性。 定义格式 计算属性与data和methods同级,格式如下: { data(){}, methods: {} // 声明计算属性 computed: { //属性名字（计算属性名称） //属性的值（计算属性处理函数） 计算属性名1 () {
Vue计算属性
韩旭不会敲代码吧的博客
07-20 4316
1、计算属性的基本使用 (1)当模板{{ }} 里面的插值比较麻烦时，可以将数据放到计算属性，然后用该计算属性。 (2)计算属性是放在vue实例的computed中定义，与methods类似，都是定义函数。 (3)计算属性定义在computed中，调用时使用mustache语法调用且后面不跟() <div id="app"> <h2>{{firstName+ ' ' + lastName}}</h2> <h2>{{firstName}} {{las
Vue基础之计算属性
MoshMode的博客
07-14 528
Vue基础之计算属性
【vue】计算属性
neeef_se的博客
02-23 1500
vue官网对于计算属性的描述： 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。 当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。 计算属性的使用 当我们有一个数组对象，想要在页面中直接展示数组对象某一个值的总和时，我们可以使用method或者使用计算属性。后续为什么使用计算属性，而不用method后文会提及到的。 页面展示书的总价这里就使用了计算属性，在计算属性中定义一个值，可以在页面
vue计算属性的使用
leileibrother的博客
06-15 1万+
我们有时候会在模板中绑定表达式来做简单的数据处理，但是如果表达式太长，就会变得臃肿难以维护，比如&lt;div&gt;     {{text.split(',').reverse().join(',')}} &lt;/div&gt;表达式里面包含了3个操作，有时候可能会更加复杂，这时我们可以使用计算属性。如下&lt;template&gt; &lt;div&gt; {{re...
Vue 计算属性
ShirleyXuMM的博客
06-22 184
Vue 计算属性 业务： 将一个 字符串 反向 ？ 思路： str ->arr- arr反向 ->str 普通写法：在vue中写一个方法在模板里调用，如下： <div id="app"> <p>{{msg}}</p> <p>{{msgReverse()}}</p> </div> new Vue({ el: '#a...
vue3计算属性的写法
08-24
在Vue 3中，计算属性的写法与Vue 2有一些不同。在Vue 3中，计算属性使用了新的Composition API。下面是一个简单的示例： ```vue import { computed } from 'vue'; export default { setup() { const firstName ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值