Vue2.5入门——计算属性与监听器

最新推荐文章于 2022-11-18 22:12:42 发布
最新推荐文章于 2022-11-18 22:12:42 发布
阅读量218 收藏
点赞数
分类专栏： Vue2.5入门
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33930360/article/details/82080072
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        姓：<input v-model="firstName">
        名：<input v-model="lastName">
        <!--用一个fullName的计算属性-->
        <div>{{fullName}}</div>
        <!--监听变化的次数-->
        <div>{{count}}</div>
    </div>

    <!--计算属性：一个属性fullName的值是根据其它的数据项计算出来的一个新的结果。-->
    <!--watch监听器：监测某一个数据或者计算属性发生了变化，一旦发生变化，我们就可以在监听器里面做一些业务逻辑。-->
    <script>
        new Vue({
            el:"#root",
            data:{
                firstName:'',
                lastName:'',
                // 计算变化初始值
                count:"0"
            },
            // 计算方法
            computed:{
                fullName:function () {
                    // 通过下面计算
                    return this.firstName+''+this.lastName
                }
            },
            // 监听器
            watch:{
                // 监听fullName的变化
                fullName:function () {
                    // 变化则加一
                    this.count ++
                }


                // 监听firstName的变化
                // firstName:function () {
                //     // 变化则加一
                //     this.count ++
                // },
                // lastName:function () {
                //     // 变化则加一
                //     this.count ++
                // }
            }
        })
    </script>
</body>
</html>

 

前台端茶工程师
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue:计算属性和监听器
圆圆的 JavaScript 博客
02-22 497
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板 过重且难以维护，此时就可以考虑计算属性和监听器。
vue计算属性与监听器
weixin_69761220的博客
07-27 291
计算属性，监听器
VueJs(7)---计算属性和侦听器
a8892117的博客
05-02 231
计算属性和侦听器 一、 概述 计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方，模板不再是简单的声明式逻...
Vue 计算属性和监听器
weixin_45735361的博客
03-21 118
计算属性 一般情况下属性都是放到data中的，但是有些属性可能是需要经过一些逻辑计算后才能得出来，那么我们可以把这类属性变成计算属性。比如以下： <div id="app"> <label for="length">长：</label> <input type="number" name="length" v-model:value="le...
vue.js 计算属性和监听器
trenttom的博客
12-13 229
vue.js 计算属性'computed'和监听器'watch'计算属性 computed案例计算属性双向绑定监听器watch 计算属性 computed 计算属性 类似于 methods 选项中定义的函数 计算属性 会进行缓存，只在相关响应式依赖发生改变时它们才会重新求值。 函数 每次都会执行函数体进行计算。 需求：输入数学与英语分数，采用 methods 与 computed 分别计算出总得分...
Vue初体验——快速入门
程序无言
09-27 206
一. Vue基础语法 1. 插值操作 v-once: 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。并且该指令后面不需要跟任何表达式。 <h2 v-once>{{message}}</h2> v-html: 按照HTML格式解析，指令后面往往会跟上一个string类型。 <h2 v-html="link"></h2> v-text: 该作用和Mustache比较相似，都是将数据显示在界面中。不过v-text不会因为网络慢的原因，界面上
Vue3新特性——Composition API详解
热门推荐
ailsa_csdn的博客
03-01 1万+
本套笔记是学习尚硅谷视频教程所整理
vue入门
Chow_yi的博客
03-09 328
1，创建vue项目 1.1，安装： npm install -g @vue/cli # OR yarn global add @vue/cli 检查版本 vue --version 升级 npm update -g @vue/cli # 或者 yarn global upgrade --latest @vue/cli 1.2，创建项目 创建一个新项目 vue create hello-world 选择下面三个 2、 2.1、组成-三部分 template 视图标签 （template标签不会
vue.js从入门到深入再到随心而用————vue电商项目005(分类管理模块、参数管理模块)
Belief的博客
05-12 852
基于element-ui完成的vue项目，这篇博客来说说分类管理和参数管理两个模块的完成。大家感兴趣可以进来看看哦，用了很多炫酷的组件，同时也收获了很多，会持续更新的哦！！！
Vue快速入门学习笔记(更新ing)
喜欢前端的后端 MelodyJerry
11-15 4121
原在博客园发布，先同步到CSDN：https://www.cnblogs.com/melodyjerry/p/13768594.html 本笔记综合了视频狂神说的Vue快速上手和菜鸟教程、CSDN等博客文章，以及个人的一些学习见解与体会。 由于是为了团队需要而快速入门，HTML、CSS、JS、Vue等基础均不全，故本笔记仅供参考学习使用。 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios.
watch , computed和methods之间的区别
qq_43436432的博客
11-28 925
watch(侦听器) watch为对象形式，键是需要观察的表达式，值是对应的回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看成是computed和methods的结合体 下面是官方例子： &lt;div id="watch-example"&gt; &lt;p&gt; 问一个问题： &lt;input v-model="question"...
VUE之计算属性和监听器
cyy13579的博客
08-29 411
vue中对于数据的处理最常用的有计算属性以及监听器。计算属性和监听器都是vue实例的一个属性。本文就来聊一聊计算属性和监听器。
vue 的计算属性（computed）和侦听器（watch）
青蛙king的博客
10-27 3688
目录 一、计算属性（computed） 1、计算属性的特点 2、计算属性的原理 3、computed与methods的区别 二、侦听器（wacth） 1、侦听器的特点 2、使用 wacth 的注意事项 3、wacth 的两个属性 4、watch 与 $watch 的关系 5、watch 的使用案例 三、计算属性 和 侦听器 适用场景 四、推荐几篇关于 computed 和 watch 的原理的深度解析好文 一、计算属性（computed） 1、计算属性的特点 支持数据缓....
vue中的计算属性和侦听器
悦.L的博客
11-02 481
计算属性 在模板中使用
vue：计算属性和监听器、过滤器
qq_33767353的博客
10-07 198
文章目录计算属性和侦听器过滤器 计算属性和侦听器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <b
Vue | 05 计算属性和监听器
LorneNote
11-13 349
内容提要： 计算属性的使用场景及表示方法 计算缓存与方法的差异 计算属性与监听器属性的使用比较 计算属性的Setter表示方法 监听器的使用方式 计算属性 在模板内写表达式是非常方便的，但它们仅仅能做一些简单的操作，把太复杂的表达式放在模板中可能会导致臃肿和难以维护。例如： &amp;amp;lt;div id=&amp;quot;example&amp;quot;&amp;amp;gt; {{
Vue框架学习(第五课)计算属性和监听器
qq_56248592的博客
11-18 364
Vue框架学习(第五课)computed属性和watch属性
vue中监听器和计算属性
qq_42707594的博客
08-13 1509
一、区别： 1、计算属性(computed)：一般是用来得到想要获得的数据格式。写在计算属性中的数据就不能写在data中了！！！ 2、监听器(watch):是用来监听数据的变化，可以监听data中的数据。 3、 二、computed的使用。 1、在computed对象中定义即可。计算属性即是计算他所依赖的值 如下图：它计算的是fullName依赖的值，不能计算在data中已经定义过的变量。即在计算属性中写了的变量就不能在data中在写一次 2、与methods中方法相比 1、计算属性会进行
vue2.5如何使用计算属性
最新发布
12-16
在Vue2.5中，可以使用计算属性来根据已有的数据计算出新的数据。计算属性的定义方式为在Vue实例中添加一个computed属性，该属性的值为一个对象，对象中包含计算属性的名称和计算属性的函数。计算属性的函数中可以使用已有的data属性和其他计算属性，计算出新的数据并返回。 以下是一个使用计算属性的例子： ```html <template> <div> <p>商品价格：{{ price }}</p> <p>商品折扣价：{{ discountPrice }}</p> </div> </template> <script> export default { data() { return { originalPrice: 100, discount: 0.8 } }, computed: { price() { return this.originalPrice }, discountPrice() { return this.originalPrice * this.discount } } } </script> ``` 在上面的例子中，我们定义了一个计算属性price，它的值为原始价格originalPrice。我们还定义了一个计算属性discountPrice，它的值为原始价格originalPrice乘以折扣discount。在模板中，我们可以直接使用这两个计算属性来显示商品价格和折扣价。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值