计算属性(vue练习例子)

最新推荐文章于 2024-06-05 20:43:04 发布
最新推荐文章于 2024-06-05 20:43:04 发布
阅读量656 收藏
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daimomo000/article/details/79355817
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

    </style>
</head>
<body>
<div id="app">
    <p>{{remessage}}</p>
    <p>{{remessagetwo}}</p>
    <p>{{a}}+{{b}}={{c}}</p>
    <p>{{a}}+{{b}}+{{c}}={{d}}</p>
    <b>计算属性是基于它们的依赖进行缓存的，通常用方法来替换计算属性</b>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script type="text/javascript">
new Vue({
    el:"#app",
    data:{
        a:15,
        b:20,
        message:"我要等待1s后显示"
    },
    //钩子函数
    computed:{
        //设置计算属性
        remessage:function(){
            return this.message.split('').reverse().join(' ');
        },
        remessagetwo:function(){
            return this.remessage.split('').reverse().join(' ');
        },
        //计算属性处理 a+b=c
        c:function(){
            return this.a+this.b
        },
        d:{
            //getter
            get:function(){
                this.d=100;//这里改变了d的值会优先进入下方的set 重置了a的值 影响了最后d的结果值
                return this.a+this.b+this.c;
            },
            set:function(newValue){
                console.log("d="+newValue);
                this.a=20;
            }
        }
    },
    methods:{

    }
});
</script>
</body>
</html>

lucky芬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
计算属性的例子
weixin_44479957的博客
06-13 84
计算属性 当我们需要一个或者多个数据经过复杂计算而得到的值时，就使用计算属性 所谓计算就是对数据进行重新整合 注: 四则运算和取余，以及直接使用数据的某些属性都不是复杂计算 所以如果只是需要多个数据求个和，就不要使用计算属性(sum是个反例) 当我们需要对一个或者多个属性进行计算(不管是否复杂),的同时还要执行其他代码 则必须使用计算属性 比如sum2 计算的同时又控制台输出计算属性的使用 计算属性有"两面性" 注册的时候是一个方法,和methods中的方法一样 使用的时候是一个数据,data中
vue中的计算属性实例详解
10-17
在Vue.js中，计算属性（Computed Properties）是一个强大的特性，它允许我们定义基于其他数据（如Vue实例的数据属性或方法）的复杂逻辑，并在需要时自动更新。这使得我们的模板保持简洁，专注于展示数据，而将复杂的...
Vue常用指令的练习、Vue中的计算属性以及表单元素与双向数据绑定v-model、axios模块的使用和get传参
HushPlot的博客
11-04 745
Vue常用指令的练习、Vue中的计算属性以及表单元素与双向数据绑定v-model、axios模块的使用和get传参
VUE计算属性（computed）题
weixin_48727085的博客
12-09 93
问：多次使用fullName计算属性，会造成计算属性的多次执行吗？ 答：不会
vue课后习题及答案
最新发布
m0_73490019的博客
06-05 3467
1.Vue是一套用于构建___用户界面_____的渐进式框架.2.Vue中的指令以______v-__开头.3.Node.js 是一个基于____V8___引擎的JavaScript运行环境。4.在yam 中，__yarn add__命令用于添加指定名称的包。5.在 npm 中，_________命令用于卸载指定名称的包。
Vue的计算属性习题
qq_54455551的博客
06-18 279
练习
Vue练习题（带解析）
qq_60245590的博客
06-11 9199
在目标页面中获取 query 参数的正确方式是使用 $route.query.参数名，而不是 this.route.query.参数名。但是它并不包含父作用域中的属性。C. 通过 npx vue-cli-service helps 命令是错误的，正确的命令是 npx vue-cli-service help，用于查看可用命令的帮助信息。要访问父作用域中的属性，可以使用 Vue 提供的 props 选项来声明父组件向子组件传递的属性，然后在子组件内部使用 this.$props 来访问这些属性。
VUE 超级详细教程
热门推荐
weixin_42371679的博客
06-06 5万+
一、安装 二、基础练习 1）引入vue.js 解释： 注意：被挂载的div要放在vue的上面，否则vue管不到 2）v-for 3）做一个计数器(v-on:click) 方法一：直接在标签里实现 <div id="app"> <h2>当前计数: {{count}}</h2> <button v-on:click="count++">+</button> <button v-on:cl
vue-examples:vue练习
04-01
描述中的“例子”和“vue练习”进一步确认了这是一个学习资源，包含一系列Vue.js的示例代码，供开发者参考和模仿，以提升其Vue技能。 标签“Vue”明确指出这个压缩包的内容与Vue.js框架直接相关，可能包括组件化、...
pcpdemo2-关于vue绑定数据练习
12-14
在Vue中，你还可以使用计算属性（computed properties）来创建基于其他数据的动态属性。例如，如果你有一个`firstName`和`lastName`属性，你可以创建一个计算属性`fullName`： ```javascript data() { return { ...
前端练习，关于一些VUE的代码
08-10
总的来说，这个`web-ui-dcsy`项目涵盖了Vue.js的基础知识和实战技巧，包括但不限于数据绑定、组件化、指令、计算属性、路由、状态管理和异步操作。通过对该项目的学习和实践，开发者能够巩固Vue.js的技能，为实际...
初学Vue
01-20
Vue.js 是一款轻量级的...随着对Vue的深入学习，你将了解到更多高级特性和概念，如计算属性、侦听器、过滤器、异步组件、路由等，这将使你能够构建更复杂的应用。在实践中不断探索和练习，你会逐渐掌握Vue.js的魅力。
vue入门--基础命令+axios+案例练习
鸢尾_的博客
05-13 852
vue入门--基础命令+axios+案例练习
前端vue入门(纯代码)07
m0_62003092的博客
06-14 619
一共拆分为4个组件：整个TodoList案例的页面结构【html】和样式设置【style】：【还未实现动态交互】 静态页面展示：前期知识准备： 【false：input框不勾选】 【true：input框勾选】 【键盘按键事件：按下回车按键，调用add()方法】 是会返回触发事件触发的源头元素。【这个源头元素指的是，当我点击子元素，虽然父元素的点击事件也会被触发（冒泡机制），但子元素才是事件的源头元素。】 生成全球唯一的ID：uuidnanoid【是uuid的精简版】：问题一： 把数据添加到list
Vue的组件化
2401_84446548的博客
04-29 203
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】Right总结来说，面试成功=基础知识+项目经验+表达技巧+运气。
VUE：常见的面试题和答案
木头
04-09 1万+
简述了常见的Vue面试题
vue常见面试题总结（经常会被问到的问题）
铁锤妹妹的博客
11-20 6975
可参考，讲的很全面： https://blog.csdn.net/qq_37774171/article/details/87093678 https://blog.csdn.net/liang377122210/article/details/71545459 https://segmentfault.com/a/1190000015560315 jQuery和Vue的区别 1. Vue.js是什么？ Vue.js是一套构建用户界面渐进式前端框架（用到哪一块就用哪一块，不需要全部用上），Vue 的核心库
Vue3进阶：计算属性（computed）的介绍、使用详解和代码实战案例
SteveRocket's-Blog
12-17 6061
Vue 3中的计算属性是Vue中的一种特殊属性，它基于现有数据进行计算（根据其他属性的值进行动态计算），并返回一个新的值。与方法（methods）相比，计算属性的特点是具有缓存机制，只有依赖的数据发生改变时才会重新计算。关于methods的使用可以参考公众号CTO Plus前面的文章，当然后面的文章也会专门做介绍。计算属性在Vue开发中非常常用，它既能提升开发效率，又能使代码更加简洁和可读性更高。在本文中，我将为大家详细介绍Vue 3中的计算属性的概念、用法和优势。
二十七、【vue面试题】计算属性的应用（2021/5/1）
weixin_41033048的博客
05-01 152
#计算属性 1.为什么要有计算属性?初衷是什么? 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护 在这个模板里面就不是简单的声明式逻辑了,必须需要看一段时间才能看懂,所以对于任何复杂的逻辑你都应该用计算属性 这里我们声明了一个计算属性reversedMessage。我们提供的函数将用作property vm.reversedMessage的getter函数: 你可以打开浏览器的控制台，自行修改例子中的vm.message 一触发set见写好的html
vue中computed计算属性的使用例子
06-06
好的，下面是一个简单的Vue组件，其中使用了computed计算属性： ```html <template> <div> <h1>{{ fullName }}</h1> <p>{{ reversedMessage }}</p> </div> </template> <script> export default { data() { return { firstName: 'John', lastName: 'Doe', message: 'Hello World' } }, computed: { fullName() { return `${this.firstName} ${this.lastName}` }, reversedMessage() { return this.message.split('').reverse().join('') } } } </script> ``` 在上面的例子中，我们定义了两个computed属性：fullName和reversedMessage。fullName依赖于firstName和lastName两个data属性，而reversedMessage则依赖于message属性。computed属性会在它所依赖的属性发生变化时自动更新，因此我们不需要手动更新这些属性。 在模板中，我们可以像访问普通的data属性一样访问computed属性。例如，我们在h1元素中展示了fullName属性，而在p元素中展示了reversedMessage属性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值