当前位置： 首页 > news >正文

Vue2-计算属性的用法

news 2026/4/5 19:07:45

题记

        vue2计算属性的用法

反转字符串

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">{{ message.split('').reverse().join('') }}
</div><script>
new Vue({el: '#app',data: {message: 'ngxe'}
})
</script>
</body>
</html>

计算属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><p>原始字符串: {{ message }}</p><p>计算后反转字符串: {{ reversedMessage }}</p>
</div><script>
var vm = new Vue({el: '#app',data: {message: 'ngxe'},computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}}
})
</script>
</body>
</html>

 computed和methods的区别

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app"><p>原始字符串: {{ message }}</p><p>计算后反转字符串: {{ reversedMessage }}</p><p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div><script>
var vm = new Vue({el: '#app',data: {message: 'ngxe'},computed: {// 计算属性的 getterreversedMessage: function () {// `this` 指向 vm 实例return this.message.split('').reverse().join('')}},methods: {reversedMessage2: function () {return this.message.split('').reverse().join('')}}
})
</script>
</body>
</html>

 computed setter

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app"><p>{{ site }}</p>
</div><script>
var vm = new Vue({el: '#app',data: {name: 'Google',url: 'http://www.google.com'},computed: {site: {// getterget: function () {return this.name + ' ' + this.url},// setterset: function (newValue) {var names = newValue.split(' ')this.name = names[0]this.url = names[names.length - 1]}}}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = 'ng ngxe';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
</script>
</body>
</html>

 后记 

        觉得有用可以点赞或收藏！

相关文章：

Vue2-计算属性的用法

题记 vue2计算属性的用法 反转字符串 <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>实例</title> <script src"https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </hea…...

编程日记 2023/10/28 21:30:37

SM3加密udf

SM3加密udf maven xml <dependencies> <!-- 配置日志 --> <dependency> <groupId>org.slf4j</groupId> <artifactId>slf4j-api</artifactId> <version>1.7.5</version> </dep…...

编程日记 2023/10/28 21:29:36

ce从初阶到大牛（两台主机免密登录）

一、配置ssh远程连接 实现两台linux主机之间通过公钥验证能够互相实现免密登陆 1.确认服务程序是否安装 rpm -qa | grep ssh 2.是否启动 ps -aux | grep ssh 3.生成非对称公钥 ssh-keygen -t rsa 4.公钥发送到客户端 cd /root/.ssh/ ssh-copy-id root192.168.170.134 因为…...

编程日记 2023/10/28 21:28:35

CS224W2.3——传统基于特征的方法(图层级特征)

前两篇中我们讨论了节点层级的特征表示、边层级的特征表示&#xff1a; CS224W2.1——传统基于特征的方法(节点层级特征)CS224W2.2——传统基于特征的方法(边层级特征) 在这篇中&#xff0c;我们将重点从整个图中提取特征。换句话说&#xff0c;我们想要描述整个图结构的特征…...

编程日记 2023/10/28 21:27:33

【CSS】包含块

CSS规范中的包含块 包含块的内容&#xff1a; 元素的尺寸和位置&#xff0c;会受它的包含块所影响。 对于一些属性&#xff0c;例如 width, height, padding, margin&#xff0c;绝对定位元素的偏移值&#xff08;比如 position 被设置为 absolute 或 fixed&#xff09;&…...

编程日记 2023/10/28 21:26:33

[SpringCloud] Nacos 简介

目录 一、Nacos&#xff0c;启动&#xff01; 1、安装 Nacos 2、运行 Nacos 3、Nacos 服务注册 二、Nacos 服务多级存储模型 1、服务跨集群分配 2、NacosRule 负载均衡&#xff08;优先本地&#xff09; 3、服务实例的权重设置 4、环境隔离 三、Nacos 注册中心细节分…...

编程日记 2023/10/28 21:25:31

TypeScript - 字符串的字面类型

啥是字面量类型 字面量类型&#xff0c;是限制了一个字符串变量的取值范围只能某几个固定字符串中的一个。 我感觉 与枚举类型有异曲同工之妙。 字符串字面量类型有啥用 没啥用。 就是来限制字符串变量不能随便赋值的。 定义一个我看看 让你读书&#xff0c;但是只有四本书可以…...

编程日记 2023/10/28 21:23:28

CRM客户管理系统源码 带移动端APP+H5+小程序

CRM客户管理系统源码 带移动端APPH5小程序 开发环境: thinkphp mysql 功能介绍&#xff1a; 1、 办公管理&#xff1a;审批管理、工作报告、日程管理、办公审批、公告管理 2、 客户管理&#xff1a;我的客户、客户列表、成交客户、行业类别、预查、地区列表、客户状态、客…...

编程日记 2023/10/28 21:22:27

Mac版好用的Git客户端 Fork 免激活

Fork是一款强大的Git客户端软件&#xff0c;在Mac和Windows操作系统上都可以使用。汇集了众多先进的功能和工具&#xff0c;可以帮助用户更方便地管理和控制Git仓库。 Fork的界面简洁直观&#xff0c;易于使用。它提供了许多高级的Git功能&#xff0c;如分支管理、合并、提交、…...

编程日记 2023/10/28 21:21:25

有一个带头结点的单链表L，设计一个算法使其元素递增有序

有一个带头结点的单链表L&#xff0c;设计一个算法使其元素递增有序 代码思路&#xff1a; 我这里懒得搞那个指针了&#xff0c;直接遍历一遍链表&#xff0c;把链表的元素复制到数组arr里面 对数组A进行一下排序&#xff0c;排完之后再把元素复制到L里面。 至于排序你用啥算…...

编程日记 2023/10/28 21:20:24

JAVA将EEE MMM dd HH:mm:ss zzz yyyy日期格式化为yyyy-MM-dd HH:mm:ss形式

1、将EEE MMM dd HH:mm:ss zzz yyyy格式的数据转换成yyyy-MM-dd HH:mm:ss 代码如下 public static void main(String[] args) throws ParseException {String dateStr "Mon Oct 26 15:19:15 CST 2020";DateFormat cstFormate new SimpleDateFormat("yyyy-MM…...

编程日记 2023/10/28 21:19:24

【Qt】文件系统

文章目录 文件系统文件操作案例&#xff1a;显示路径到标题框&#xff0c;显示内容到文本框对文件进行写操作获取文件相关信息 文件系统 Qt 通过QIODevice提供了对 I/O 设备的抽象&#xff0c;这些设备具有读写字节块的能力&#xff0c;下面是 I/O 设备的类图&#xff1a; QIO…...

编程日记 2023/10/28 21:18:23

PostgreSQL 基础知识

执行环境&#xff1a; psql 1. 创建一个表格 CREATE TABLE customers ( customer_id serial PRIMARY KEY,firstname VARCHAR(100) NOT NULL,lastname VARCHAR(100) NOT NULL,username VARCHAR(50) UNIQUE NOT NULL,password VARCHAR(50) NOT NULL,email VARCHAR(255) UNIQUE …...

编程日记 2023/10/28 21:17:22

基于 ResNet18 架构使用 deformable convolution的车道线检测

下面是一个基于关键点的车道线检测网络的 PyTorch 代码示例&#xff0c;其中使用了 deformable convolution。该代码示例基于 ResNet18 架构&#xff0c;可以根据实际情况进行修改。 首先&#xff0c;需要导入必要的库和模块&#xff1a; import torch import torch.nn as nn…...

编程日记 2023/10/28 21:15:19

C++in/out输入输出流[IO流]

文章目录 1. C语言的输入与输出2.C的IO流2.1流的概念2.2CIO流2.3刷题常见while(cin >> str)重载强制类型转换运算符模拟while(cin >> str) 2.4C标准IO流2.5C文件IO流1.ifstream 1. C语言的输入与输出 C语言用到最频繁的输入输出方式就是scanf ()与printf()。 scanf…...

编程日记 2023/10/28 21:14:19

MongoDB的安装

MongoDB的安装 1、Windows下MongoDB的安装及配置 1.1 下载Mongodb安装包 下载地址&#xff1a; https://www.mongodb.com/try/download http://www.mongodb.org/dl/win32 MongoDB Windows系统64位下载地址&#xff1a;http://www.mongodb.org/dl/win32/x86_64 MongoDB W…...

编程日记 2023/10/28 21:13:18

SQL查询优化---如何查询截取分析

慢查询日志 1、慢查询日志是什么 MySQL的慢查询日志是MySQL提供的一种日志记录&#xff0c;它用来记录在MySQL中响应时间超过阀值的语句&#xff0c;具体指运行时间超过long_query_time值的SQL&#xff0c;则会被记录到慢查询日志中。 具体指运行时间超过long_query_time值的…...

编程日记 2023/10/28 21:11:15

vue3基础流程

目录 1. 安装和创建项目 2. 项目结构 3. 主要文件解析 3.1 main.js 3.2 App.vue 4. 组件和Props 5. 事件处理 6. 生命周期钩子 7. Vue 3的Composition API 8. 总结和结论 响应式系统&#xff1a; 组件化&#xff1a; 易于学习&#xff1a; 灵活性&#xff1a; 社…...

编程日记 2023/10/28 21:10:14

Vue 数据绑定 和 数据渲染

目录 一、Vue快速入门 1.简介 : 2.MVVM : 3.准备工作 : 二、数据绑定 1.实例 : 2.验证 : 三、数据渲染 1.单向渲染 : 2.双向渲染 : 一、Vue快速入门 1.简介 : (1) Vue[/vju/]&#xff0c;是Vue.js的简称&#xff0c;是一个前端框架&#xff0c;常用于构建前端用户…...

编程日记 2023/10/28 21:09:13

【原创】解决Kotlin无法使用@Slf4j注解的问题

前言 主要还是辟谣之前的网上的用法&#xff0c;当然也会给出最终的使用方法。这可是Kotlin&#xff0c;关Slf4j何事&#xff01;&#xff1f; 辟谣内容&#xff1a;创建注解来解决这个问题 例如&#xff1a; Target(AnnotationTarget.CLASS) Retention(AnnotationRetentio…...

编程日记 2023/10/28 21:08:12

5个高效技巧：Plus Jakarta Sans开源字体全方位应用指南

5个高效技巧&#xff1a;Plus Jakarta Sans开源字体全方位应用指南 【免费下载链接】PlusJakartaSans Jakarta Sans is a open-source fonts. Designed for Jakarta "City of collaboration" program in 2020. 项目地址: https://gitcode.com/gh_mirrors/pl/PlusJa…...

编程新知 2026/4/5 18:38:26

3步解决Windows苹果设备连接难题：开源工具Apple-Mobile-Drivers-Installer使用指南

3步解决Windows苹果设备连接难题&#xff1a;开源工具Apple-Mobile-Drivers-Installer使用指南 【免费下载链接】Apple-Mobile-Drivers-Installer Powershell script to easily install Apple USB and Mobile Device Ethernet (USB Tethering) drivers on Windows! 项目地址:…...

编程新知 2026/4/5 18:38:26

使用PHP和Xunsearch实现歌曲搜索功能

要打造一款高效的音乐网站&#xff0c;搜索功能绝对是重中之重&#xff01;试想一下&#xff0c;当用户打开你的音乐网站&#xff0c;输入一首歌名&#xff0c;却发现搜索结果不仅慢&#xff0c;还不精准&#xff0c;那简直就是“用户流失现场”&#xff01;今天我们聊聊如何用…...

编程新知 2026/4/5 18:05:41

企业级数据采集架构实战：破解动态字体加密的高性能爬虫系统

企业级数据采集架构实战&#xff1a;破解动态字体加密的高性能爬虫系统 【免费下载链接】dianping_spider 大众点评爬虫&#xff08;全站可爬&#xff0c;解决动态字体加密&#xff0c;非OCR&#xff09;。持续更新 项目地址: https://gitcode.com/gh_mirrors/di/dianping_sp…...

编程新知 2026/4/5 17:39:36

如何让JSON数据在前端项目中优雅可视化和交互？

如何让JSON数据在前端项目中优雅可视化和交互&#xff1f; 【免费下载链接】json-formatter-js Render JSON objects in beautiful HTML (pure JavaScript) 项目地址: https://gitcode.com/gh_mirrors/js/json-formatter-js 在复杂的前端开发场景中&#xff0c;JSON数据…...

编程新知 2026/4/5 17:03:12

高效部署全能屏幕工具：eSearch实战安装与配置指南

高效部署全能屏幕工具&#xff1a;eSearch实战安装与配置指南 【免费下载链接】eSearch 截屏 离线OCR 搜索翻译 以图搜图 贴图 录屏 万向滚动截屏 屏幕翻译 Screenshot Offline OCR Search Translate Search for picture Paste the picture on the screen Screen recorder Omni…...

编程新知 2026/4/5 16:53:02

SwitchCase语句详解：从基础到实战

一、switch case 是什么&#xff1f;switch case 是多条件分支语句&#xff0c;专门用来判断固定值的场景。比如&#xff1a;根据分数等级 A/B/C/D 输出评价根据菜单数字 1/2/3/4 执行不同功能根据星期 1~7 做不同处理特点&#xff1a;只能判断整型、字符型&#xff08;不能判断…...

编程新知 2026/4/5 14:41:08

【OpenClaw】OpenClaw 配置完全指南：从入门到精通

【OpenClaw】OpenClaw 配置完全指南&#xff1a;从入门到精通一、配置文件基础1.1 配置文件位置1.2 配置文件结构二、核心配置详解2.1 Agents 配置2.1.1 基本配置2.1.2 模型配置2.2 Channels 配置2.2.1 飞书配置2.2.2 WebChat 配置2.3 Bindings 配置2.4 Gateway 配置2.5 Plugin…...

编程新知 2026/4/5 13:56:49

怎么部署OpenClaw？2026年京东云10分钟保姆级安装OpenClaw及大模型百炼APIKey指南

怎么部署OpenClaw&#xff1f;2026年京东云10分钟保姆级安装OpenClaw及大模型百炼APIKey指南。OpenClaw作为2026年主流的AI自动化助理平台&#xff0c;可通过阿里云轻量服务器实现724小时稳定运行&#xff0c;并快速接入钉钉&#xff0c;让AI在企业群聊、个人工作流中自动执行任…...

编程新知 2026/4/5 13:50:40

智能歌词工具：四大维度解决音乐歌词管理难题

智能歌词工具&#xff1a;四大维度解决音乐歌词管理难题 【免费下载链接】163MusicLyrics 云音乐歌词获取处理工具【网易云、QQ音乐】 项目地址: https://gitcode.com/GitHub_Trending/16/163MusicLyrics 在数字音乐时代&#xff0c;歌词已不再是简单的文字附加&#xf…...

编程新知 2026/4/5 13:32:04