vue学习二（计算属性computed和监听器watch）
1.1.computed 计算属性
<span>总价格为{{sumPrice}}</span>
computed:{
sumPrice(){
return this.xyjPrice*this.xyjNum+this.shzPrice*this.shzNum
}
},
<span>总价格为{{sumPrice()}}</span>
methods:{
sumPrice(){
return this.xyjPrice*this.xyjNum+this.shzPrice*this.shzNum
}
},
2.1watch监听一个值的变化 做出相应的反应
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Document</title>
7 </head>
8 <body>
9 <script src="../node_modules/vue/dist/vue.js"></script>
10
11 <!--表单项自定义组件-->
12 <div id="app">
13 <!--某些结果式基于之前数据实时计算出来的 我们可以利用计算属性来完成-->
14 <ul>
15 <li>西游记 ： 价格 {{xyjPrice}},数量：<input type="number" v-model="xyjNum"></li>{{msg}}
16 <li>水浒传 ： 价格 {{shzPrice}},数量：<input type="number" v-model="shzNum"></li>
17 <span>总价格为{{sumPrice}}</span>
18 </ul>
19 </div>
20 <script>
21
22
23
24 //computed定义的方法我们是以属性访问的形式调用的{{computedTest}} computed是属性调用，computed带有缓存功能
25 //，但是methods定义的方法，我们必须要加上{{computedTest()}} 来调用 ，methods是函数调用 而methods没有缓存功能
26
27 //computed 计算属性
28 //watch监听一个值的变化 做出相应的反应
29 let app = new Vue({
30 el:"#app",
31 data:{
32 xyjPrice:88,
33 shzPrice:89,
34 xyjNum:3,
35 shzNum:4,
36 msg:""
37 },
38 computed:{
39 sumPrice(){
40 return this.xyjPrice*this.xyjNum+this.shzPrice*this.shzNum
41 }
42 },
43 watch: {
44 xyjNum:function(newValue,oldValue){
45 alert("newValue="+newValue+",oldValue="+oldValue);
46 if(newValue>=3){
47 this.msg="库存超了";
48 this.xyjNum = 3;
49 }else{
50 this.msg=""
51 }
52 }
53 },
54 })
55 </script>
56 </body>
57 </html>
vue学习二（计算属性computed和监听器watch）的更多相关文章
- VUE学习之计算属性computed
计算属性:computed 先看一下官网的说法 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="ex ...
- Vue学习3：计算属性computed与监听器
下面是计算属性相关代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- [Vue]method与计算属性computed、侦听器watch与计算属性computed的区别
一.方法method与计算属性computed的区别 方法method:每当触发重新渲染时,调用方法method将总会再次执行函数: 计算属性computed:计算属性computed是基于它们的响应 ...
- Vue教程：计算属性computed与侦听器watch（三）
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- 怎样理解 Vue 中的计算属性 computed 和 methods ?
需求: 在 Vue 中, 我们可以像下面这样通过在 引号 或 双花括号 内写 js 表达式去做一些简单运算, 这是可以的, 不过这样写是不直观的, 而且在 html 中 夹杂 一些运算逻辑这种做法其实 ...
- vue的计算属性computed和监听器watch
<template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...
- Vue.js学习 Item5 -- 计算属性computed与$watch
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作.模板是为了描述视图的结构.在模板中放入太多的逻辑会让模板过重且难以维护.这就是为什么 Vue.js 将绑定表达式限制为一个表达式.如果需 ...
- vue学习笔记 计算属性（四）
计算属性就是vue实例里的computed属性,对应一个对象,里面可以放各种方法,方法的作用就是可以生成和数据变量对应的计算后的变量,跟数据相关的复杂逻辑变量,都可以使用计算属性实现,computed ...
- Vue学习之--------计算属性（2022/7/9）
文章目录 1.计算属性 1.1 计算属性实现 1.1.1 基础知识 1.1.2 代码实例 1.1.3 测试效果 1.2 计算属性简写 1.2.1 简写代码 1.3 使用插值语法实现 1.3.1 代码实 ...
- vue监听器watch & 计算属性computed
侦听器watch vue中watch是用来监听vue实例中的数据变化 watch监听时有几个属性: handle:其值是一个回调函数,就是监听对象对话的时候需要执行的函数 deep:其值true 或者 ...
随机推荐
- Qt编写的项目作品16-Onvif搜索和云台控制工具
一.功能特点 广播搜索设备,支持IPC和NVR,依次返回. 可选择不同的网卡IP进行对应网段设备的搜索. 依次获取Onvif地址.Media地址.Profile文件.Rtsp地址. 可对指定的Prof ...
- Qt音视频开发2-vlc回调处理
一.前言 用句柄来显示视频,方便是很方便,但是有个缺点就是不能拿到实时视频的每张图片的数据,这个就比较讨厌,大部分的监控行业的应用,除了截图以外,很可能需要拿到图片自己做一些处理的,而且拿到图片自己绘 ...
- Qt 中实现系统主题感知
[写在前面] 在现代桌面应用程序开发中,系统主题感知是一项重要的功能,它使得应用程序能够根据用户的系统主题设置(如深色模式或浅色模式)自动调整其外观. Qt 作为一个跨平台的C++图形用户界面应用程序 ...
- 【Java 温故而知新系列】基础知识-02 数据基本类型
1.Java基本数据类型 Java语言是强类型语言,对于每一种数据都定义了明确的具体的数据类型,在内存中分配了不同大小的内存空间. 基本数据类型 数值型:整数类型(byte,short,int,lon ...
- 【漏洞分析】20250105-SorraStaking：奖励金额计算错误，每次取款都有大收益
背景信息 2024-12-21 11:58:11 (UTC) 准备交易:https://app.blocksec.com/explorer/tx/eth/0x72a252277e30ea6a37d2d ...
- 在 .NET Core中如何使用 Redis 创建分布式锁
在 .NET Core WebApi 中使用 Redis 创建分布式锁可以通过 StackExchange.Redis 库来实现.分布式锁用于确保在分布式系统中,同一时间只有一个进程可以执行某段代码. ...
- Note - 速通 NPC？有限域算术！
浅谈有限域在 OI 中的一些应用 (2023 国家集训队论文), 戚朗瑞. \(\textbf{Example 1.}\) 给定一张有向图 \(G=(V,E)\), \(|V|=n\), \( ...
- Android 稳定性(二)：治理思路篇
本文同步发布于公众号:移动开发那些事:Android 稳定性(二):治理思路篇 一般来讲Android稳定性包括crash和ANR,本文主要围绕crash(应用的crash率)来讲述如何来做Andro ...
- Hbase shell学习
通过Shell工具可以对云数据库HBase进行数据管理,包括建表.插入数据.删除数据和删除表等操作,本文介绍Shell的基本使用命令. 访问配置 如果使用的是云数据库HBase标准版,基本环境的配置操 ...
- 利用mybatis拦截器记录sql，辅助我们建立索引(二)
背景 上一篇中讲述了mybatis的mapper初始化过程和执行过程,这篇再讲讲具体的拦截器的使用,以实现记录sql到持久化存储,通过分析这些sql,我们就能更方便地建立索引. 利用mybatis拦截 ...