VUE 初学(4) 数据、方法、计算属性、侦听器

2023-05-16

<!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>数据, 方法, 计算方法和侦听器</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>

    
    <script type="text/javascript">
        // 数据, 方法, 计算方法和侦听器
        const app = Vue.createApp({
            data() {
                return {
                    message: 'Hello',
                    price: 8,
                    num: 2
                }
            },
            // 侦听器
            watch: {
                // price 是data里面的属性名  第一个参数是price新的值 第二个参数是price原来的值
                price(newprice, net){
                    console.log(newprice, net)
                }
            },

            // 计算属性
            computed:{
                total(){
                    return this.price * this.num;
                }
            },
            // 自定义方法
            methods: {
                handleClick(str){
                    return str = str.toUpperCase();
                },
                totalFun(){
                    console.log();
                    return this.price * this.num;
                }
            },
            // 总结    
            // computed 当计算属性依赖的内容发生变化时, 才会重新计算
            // methods 只要页面重新渲染, 会重新计算
            template: `
                <div> {{handleClick(message)}} </div>
                <div> {{total}} </div>
                <div> {{totalFun()}} </div>
            `
        })

        var vm = app.mount("#root");
    </script>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VUE 初学(4) 数据、方法、计算属性、侦听器 的相关文章

  • 前端实现导出excel表格(合并表头)

    需求 勾选行导出为excel表格 合并表头 一 安装插件 npm install save file saver xlsx 运行项目报如下警告的话 运行npm install xlsx 0 16 0 save 来降低版本号 最初我安装的版本
  • 前端vue项目部署到tomcat,一刷新报错404解决方法

    原文链接 https my oschina net u 1471354 blog 4277008 VUE项目部署到Tomcat之后 刷新页面会出现404 此问题主要是使用了VUE router的History模式 一 解决方案 1 编辑se
  • vue+C#后台上传excel处理数据

    比较简洁的excel处理方法 希望对大家有所帮助 1 界面
  • vue3使用import.meta.env在vite.config.ts下使用env环境变量的方法

    vue3使用import meta env在vite config ts下使用env环境变量的方法 编程一枚的博客 CSDN博客
  • element-plus中 el-image :src属性发送get请求

    项目场景 Element plus 中
  • Vue + Element UI 前端篇(十一):第三方图标库

    Vue Element UI 实现权限管理系统 前端篇 十一 第三方图标库 使用第三方图标库 用过Elment的同鞋都知道 Element UI提供的字体图符少之又少 实在是不够用啊 幸好现在有不少丰富的第三方图标库可用 引入也不会很麻烦
  • Vue2运行报错SyntaxError: Cannot use import statement outside a module

    问题描述 像配置vue3那样配置vue config js的路径代理 代替src后 报错 语法错误 不能在模块外部使用导入语句 原因 模块语法一个是CommonJS module 一个是 ES6 module vue config js里的
  • 前端大屏常用的适配方案

    假设我们正在开发一个可视化拖拽的搭建平台 可以拖拽生成工作台或可视化大屏 或者直接就是开发一个大屏 首先必须要考虑的一个问题就是页面如何适应屏幕 因为我们在搭建或开发时一般都会基于一个固定的宽高 但是实际的屏幕可能大小不一 接下来我们就尝试
  • mapState的使用(常用)

    mapState作用 可以辅助获取到多个state的值 怎么使用 1 在 vue组件中引入 在js块中引入 import mapState from vuex 2 在 vue组件中computed下定义一个对象 computed mapSt
  • vue prop属性使用方法小结

    Prop 一 基本用法 Prop的基本用法很简单 作用是在子组件中接收父组件的值 父组件传值
  • Vue项目的部署(服务器)

    Vue项目的部署 服务器 前几天帮朋友写了一个可以动态查看地点温度的前端项目 目前已经部署上线了 访问链接点这里 服务器是朋友的 倒时候打不开会很正常 说不定又使用服务器玩大数据项目去了 效果图 图一 图二 当然 温度也都是实时跟新的 而且
  • uni-app项目中使用scss语法

    最近正在学习uni app开发 我先把文档浅略翻了遍 发现组件和接口几乎都是按照微信小程序走 但是视图层上的语法又是按照vue的语法走的 所以开发过程一定要注意这点 然后我想在uni app项目中使用scss语法 但是具体怎么安装呢 历经曲
  • vue实现批量打印

  • 前端将List列表转化为树型结构(reduce函数)

    主要用到了reduce 函数 for循环可以做到的事情reduce 都可以做到 甚至操作起来更加简单方便和高雅 reduce 为数组中的每一个元素依次执行回调函数 不包括数组中被删除或从未被赋值的元素 reduce语法 array redu
  • 大数据毕业设计之前端02:架构布局和aside的设计

    前言 上一篇主要讲了我学习前端的一个经历 以及为什么选择BuildAdmin作为深入前端学习的原因 同事也大致聊了一下学习前端需要使用哪些技术栈 本篇文章来拆解一下BuildAdmin的前端代码结构 和布局实现的细节 前端代码结构 必须先了
  • Vue3+Echarts:堆积柱状图的绘制

    一 需求 在Vue3项目中 想用Echarts来绘制堆积柱状图 去展示最近一周APP在不同渠道的登录人数 效果如下 二 实现 关于Echarts的下载安装以及图表的样式设计 此处不展开 1 Templates部分
  • vue项目日期处理day.js

    dayjs安装 1 npm 安装 npm install dayjs save 2 项目使用 import dayjs from dayjs ES 2015 dayjs format 使用介绍 1 秒 获取或设置秒 接受0到59的数字 如果
  • 基于springboot+vue实现位置的多分馆图书馆推荐系统演示【附项目源码+论文说明】

    基于springboot实现位置的多分馆图书馆推荐系统演示 摘要 时代的变化速度实在超出人类的所料 21世纪 计算机已经发展到各行各业 各个地区 它的载体媒介 计算机 大众称之为的电脑 是一种特高速的科学仪器 比人类的脑袋要灵光无数倍 什么
  • 黑豹程序员-字符串中查找出重复的字符串

    Collections frequency codeList element 字符串element 在codeList集合中重复的次数 List
  • ❤ Vue3 使用

    Vue3 使用 Vue3之toRefs的使用 作用 toRefs 可以将一个响应式的对象 转换成普通对象 但是转换后的普通对象的每一个属性值都是响应式的 这样我们可以使用es6的对象解构或者三点运算符等操作 代码

随机推荐

  • vnc服务器搭建

    1 vnc 服务简介 vnc Server会在服务器端启动一个监听用户要求的端口 xff0c 一般端口号在5901 xff5e 5910之间 xff0c 当客户端启动X server连接到5901后 xff0c vnc Server再将一堆
  • ubuntu18.04安装显卡RTX3090(python3.8+nvidia Drive455.38+cuda11.1+cudnn7+pytorch1.7+torchvision0.8)

    引言 实验室服务器是Ubuntu18 04 xff08 16 04和20 04 xff09 xff0c 刚刚显卡升级到RTX3090 记录一下装机过程 xff0c 每一个过程的小部分也可能单独用到 所以罗列一些用到的网站链接 xff0c 省
  • 7步教你使用Keil使用注释模板,好好注释,从我做起!

    前言 当你看到别人好的注释模板的时候是否还在多文件复制粘贴呢 xff1f 教你一招 把前人好的模板套用起来 好好注释 xff0c 从我做起 xff01 提示 xff1a 本操作在Keil4环境下进行 xff0c Keil5环境同理 一 打开
  • STM32学习——GPIO应用之跑马灯+蜂鸣器实验

    GPIO应用 跑马灯 43 蜂鸣器实验 跑马灯和蜂鸣器的实验都是使用的 GPIO 的通用推挽输出模式 xff0c 这是 GPIO 最简单的一个基本功能 1跑马灯实验 1 1硬件设计 如图所示跑马灯使用的 LED 只有 DS0 xff08 红
  • STM32学习——串口

    STM32学习 串口 USART通用同步异步收发器 xff08 Universal Synchronous Asynchronous Receiver Transmitter xff09 是一串行通信设备 xff0c 可以灵活地与外部设备进
  • core dumped 错误

    Aborted xff08 core dumpde xff09 一般是关于内存异常 xff1a 详细解释 gdb使用 1 往受到系统保护的内存地址写数据 有些内存是内核占用的或者是其他程序正在使用 xff0c 为了保证系统正常工作 xff0
  • 使用OpenCV进行特征(颜色、形状)提取

    图像处理 图像处理所做的只是从图像中提取有用的信息 xff0c 从而减少数据量 xff0c 但保留描述图像特征的像素 下面从图像中提取颜色 形状和纹理特征的方法开始 1 颜色 每次处理图像项目时 xff0c 图像的色彩空间都会成为最先探索的
  • proxifier中文汉化版

    在日常工作中使用到一些网络不稳定的服务时 xff0c 经常会遇到一个很头疼的问题 xff0c 那就是非常慢 xff0c 很是令人抓狂 xff0c 所以小编将介绍一款非常好用的代理客户端proxifier 软件下载点击这里 xff0c 支持s
  • K8S-微服务调用及运行过程

    为什么分析微服务过程调用 在实际的项目中 xff0c 微服务之间涉及到业务代码的部分 xff0c 调用逻辑非常复杂 对于工程师而言 xff0c 熟悉组件之间的调用关系 方便之后的业务模块开发 以及集群部署与自动化编排过程中有非常大的帮助 x
  • freertos常用任务函数----freertos初学笔记

    vtasksuspend 任务挂起函数 xff0c 用户可以调用Vyasksuspend xff08 xff09 函数将任何状态的任务挂起 xff0c 被挂起的任务得不到cpu的使用权也不会参加调度 xff0c 他相对于调度器而言是不可见的
  • 作为一名实施,需要自己反编译、网络抓包、猜测数据库,干的全不像实施的活……

    一位朋友提到这样的一个问题 xff1a 做为一名现场实施人员 xff0c 面对某x系统 xff0c 一片空白 好不容易整明白点了 xff0c 又发现x系统与某xx系统有关系 xff0c 再深入一点 xff0c 还与某xxx系统相连 xff0
  • Kalibr安装 ubuntu18.04+ros melodic

    原来的版本需要opencv2 xff0c 所以出现很多错误 总结安装kalibr安装核心重点就是 xff1a 下载这个版本的kalibr包 xff0c https github com ori drs kalibr 遇到问题就看看是哪个模块
  • 学了4年C++后,我转向了Python

    C 43 43 已经学不动了 xff0c 现在换 Python 还来得及吗 xff1f 一位四年工作经验的 C 43 43 程序员亲述转型历程 xff0c 这不仅仅是语言上的转变 xff0c 而是代码思维甚至工作环境的转变 通常 xff0c
  • 关于远程控制软件向日葵Linux端、win10版本交互“连接已断开”问题的解决

    问题环境 xff1a 被控制端 xff1a Ubuntu18 04版本操作系统 xff08 默认gdm3桌面显示管理器 xff09 控制端 xff1a win10版本操作系统 向日葵版本 xff1a 出现的问题 xff1a 当我的win10
  • Layui 弹出全屏自适应

    span class token keyword var span index span class token operator 61 span layer span class token punctuation span span c
  • CSS - 修改滚动条样式

    span class token comment 整个滚动条 span span class token selector webkit scrollbar span span class token punctuation span sp
  • VUE 初学(1)

    span class token doctype lt DOCTYPE html gt span span class token tag span class token tag span class token punctuation
  • VUE 初学(2)生命周期

    span class token doctype lt DOCTYPE html gt span span class token tag span class token tag span class token punctuation
  • VUE 初学(3) 模板语法

    span class token operator lt span span class token operator span DOCTYPE html span class token operator gt span span cla
  • VUE 初学(4) 数据、方法、计算属性、侦听器

    span class token doctype lt DOCTYPE html gt span span class token tag span class token tag span class token punctuation