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

Vue模版语法

news 2026/4/1 10:01:22

目录

接下来学习@click 

 例题：修改背景颜色

例题：反复点击button按钮，可以不断切换背景颜色

 先看以下例题是回顾vue的用法

  •  
  • <body><div id="box">{{myname}} - {{myage}}</div><script>var vm = new Vue({el:"#box",data:{myname:"lyx",myage:26}})</script></body>
  • 运行结果如下：vue对象被挂载到vm实例上
  • 通过在控制台直接vm.属性名修改

接下来学习@click 

可以看到@click形式是对v-on:click的简写 

<a v-on:click="doSomething"> ... </a><!-- 简写 -->
<a @click="doSomething"> ... </a>

  •  

 vue对象的el、data、methods属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 在线导入 --><!-- 开发环境版本，包含了用帮助的命令行警告 --><script src="../vue/vue.js"></script>
</head><body><div id="box">{{myname}} - {{myage}}<button @click="handleChange()">点我控制台输出</button></div><script>var vm = new Vue({el:"#box",data:{myname:"lyx",myage:26},methods:{handleChange(){console.log("哈哈哈哈哈哈哈哈哈");}}//定义所有事件方法})</script></body></html>

在handleChange()方法里面对myname和myage的值进行修改，点击button页面刷新可以看到： 

    <div id="box">{{myname}} - {{myage}}<button @click="handleChange()">click me</button></div><script>var vm = new Vue({el:"#box",data:{myname:"lyx",myage:26},methods:{handleChange(){console.log("哈哈哈哈哈哈哈哈哈");vm.myname = "xmq";vm.myage = 22;}}//定义所有事件方法})</script>

 通过this.myname、this.myage来修改值

 运行结果如下：

 

 例题：修改背景颜色

 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 本地导入 --><script src="../vue/vue.js"></script><style>.bgRed {background: #da3939;height: 100px;width: 100px;}.bgBlue {background: #4dddd1;height: 100px;width: 100px;}</style>
</head><body><div id="box">{{myname}} - {{myage}}<button @click="handleChange()">click me</button><div :class="whichcolor"></div></div><script>new Vue({el: "#box",data: {myname: "lyx",myage: 26,whichcolor: "bgRed"},methods: {handleChange(t) {console.log("哈哈哈哈哈哈哈哈哈", this);this.myname = "xmq";this.myage = 22;this.whichcolor = "bgBlue";}}//定义所有事件方法})</script></body></html>

例题：反复点击button按钮，可以不断切换背景颜色

效果如下：

 

 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 本地导入 --><script src="../vue/vue.js"></script><style>.bgRed {background: #da3939;height: 100px;width: 100px;}.bgBlue {background: #4dddd1;height: 100px;width: 100px;}</style>
</head><body><div id="box">{{myname}} - {{myage}}<button @click="handleChange()">click me</button><div :class="whichcolor"></div><br /><div :class="isColor?'bgRed':'bgBlue'"></div></div><script>new Vue({el: "#box",data: {myname: "lyx",myage: 26,whichcolor: "bgRed",isColor: true},methods: {handleChange(t) {console.log("哈哈哈哈哈哈哈哈哈");this.myname = "xmq";this.myage = 22;this.whichcolor = "bgBlue";this.isColor = !this.isColor;}}//定义所有事件方法})</script></body></html>

相关文章：

Vue模版语法

目录 接下来学习click 例题&#xff1a;修改背景颜色 例题&#xff1a;反复点击button按钮&#xff0c;可以不断切换背景颜色 先看以下例题是回顾vue的用法 <body><div id"box">{{myname}} - {{myage}}</div><script>var vm new Vue({el…...

编程日记 2023/8/3 23:51:20

新一代开源流数据湖平台Apache Paimon入门实操-上

文章目录 概述定义核心功能适用场景架构原理总体架构统一存储基本概念文件布局 部署环境准备环境部署 实战Catalog文件系统Hive Catalog 创建表创建Catalog管理表查询创建表&#xff08;CTAS&#xff09;创建外部表创建临时表 修改表修改表修改列修改水印 概述 定义 Apache Pa…...

编程日记 2023/8/3 23:50:17

ELK 企业级日志分析系统（一）

目录 一、ELK 简介 1.1 组件说明 1.2 为什么要使用ELK 1.3 完整日志系统的基本特征 1.4 ELK工作原理 二、Elasticsearch的介绍 2.1 Elasticsearch的核心: 三、Logstash 3.1 Logstash简介 四、Kibana 五、部署ELK日志分析系统 5.1 服务器配置 5.2 ELK Elasticse…...

编程日记 2023/8/3 23:49:16

2023-08-01力扣今日二题-Hard-DPLIS优先队列-好题

链接&#xff1a; 354. 俄罗斯套娃信封问题 题意&#xff1a; 一个信封有长宽&#xff0c;如果一个信封的长宽均严格大于另一个信封&#xff0c;那么大的这个信封可以装下小的这个信封 求最多能套娃几个信封 解&#xff1a; 类似普通的最长上升子序列&#xff0c;但是信封…...

编程日记 2023/8/3 23:48:15

并发 如何创建线程 多线程

进程&#xff1a;一个程序的执行过程 线程&#xff1a;一个方法就是一个线程 并发&#xff1a;多个线程抢夺一个资源 操作同一个对象 创建线程方法1 //创建线程方法1 继承Thread类 重写润方法 调用start开启线程 public class TestThead extends Thread{Overridepublic voi…...

编程日记 2023/8/3 23:47:13

亚马逊鲲鹏系统是怎么引流的？

亚马逊鲲鹏系统有三种引流方式&#xff0c;可设置通过亚马逊站点搜索、站外引流、直接访问产品页面进入到相关产品页面进行操作。 1、通过亚马逊站点搜索 正常的登录到我们的亚马逊主页&#xff0c;然后通过设置关键词及asin&#xff0c;最后进入你指定的产品&#xff0c;进行…...

编程日记 2023/8/3 23:46:12

第五章 Git

5-1、Git的安装 1、为什么要使用代码版本控制系统 【1】版本控制 【2】开发中存在的麻烦 2、Git和SVN的对比 【1】Git和SVN对比 &#xff08;1&#xff09;SVN &#xff08;2&#xff09;Git 3、Git下载和安装 【1】下载 【2】安装 一路下一步就好了&#xff0c;更换安装…...

编程日记 2023/8/3 23:45:11

无涯教程-Lua - 变量声明

变量的名称可以由字母&#xff0c;数字和下划线字符组成。它必须以字母或下划线开头&#xff0c;由于Lua区分大小写&#xff0c;因此大写和小写字母是不同的。 在Lua中&#xff0c;尽管无涯教程没有变量数据类型&#xff0c;但是根据变量的范围有三种类型。 全局变量(Global) …...

编程日记 2023/8/3 23:44:10

vue3学习-组件基础、深入组件

组件 基本概述 单独的 .vue文件 单文件组件&#xff08;SFC&#xff09;&#xff08;single file component&#xff09; 使用子组件 导入&#xff0c;无需注册&#xff0c;直接使用编译时&#xff0c;区分大小写可使用 />关闭标签 传递 props 需要再组件上声明注册 def…...

编程日记 2023/8/3 23:43:08

原型链污染分析

原型链污染问题 原型链原型的继承原型链污染 原型链 原型的继承 先创建一个对象&#xff0c;查看一下属性 const obj { prop1: 111, prop2: 222,} 这里的Object.prototype就是对象的原型。 原型里面有许多的属性&#xff0c;这里面的constructor是我们需要着重关注的。 除此…...

编程日记 2023/8/3 23:42:07

RF PCB的9条改进型建议

1.小功率的RF的PCB设计中，主要使用标准的FR4材料（绝缘特性好、材质均匀、介电常数ε=4，10%）。主要使用4层~6层板，在成本非常敏感的情况下可以使用厚度在1mm以下的双面板，要保证反面是一个完整的地层，同时由于双面板的厚度在1mm以上，使得地层和信号层之间的FR4介质较厚，…...

编程日记 2023/8/3 23:41:06

网络安全（黑客）自学就业

前段时间&#xff0c;遇到网友提问&#xff0c;说为什么我信息安全专业的找不到工作&#xff1f; 造成这个结果主要是有两大方面的原因。 第一个原因&#xff0c;求职者本身的学习背景问题。那这些问题就包括学历、学校学到的知识是否扎实&#xff0c;是否具备较强的攻防实战…...

编程日记 2023/8/3 23:40:05

uni-app选择器（ uni-data-picker）选择任意级别

背景说明 uni-app 官方的插件市场有数据驱动选择器&#xff0c;可以用作多级分类的场景。引入插件后&#xff0c;发现做不到只选择年级&#xff0c;不选择班级&#xff08;似乎&#xff0c;只能到最后子节点了&#xff09;。 需求中&#xff0c;有可能选择的不是叶子。比如&a…...

编程日记 2023/8/3 23:39:03

网络入侵探测器Pi.Alert

什么是 Pi.Alert &#xff1f; Pi.Alert 是 WIFI/LAN 入侵探测器。通过扫描连接到您的 WIFI/LAN 的设备&#xff0c;提醒您未知设备的连接。它还警告断开“始终连接”的设备。 Pi.Alert 使用了三种扫描方式 方式1&#xff1a;arp-scan。arp扫描系统实用程序用于使用 arp 帧搜索…...

编程日记 2023/8/3 23:38:00

Flask项目打包为exe（附带项目资源，静态文件）

1.在项目根目录创建my_app.spec文件&#xff0c;内容如下&#xff1a; # -*- mode: python ; coding: utf-8 -*-block_cipher Nonea Analysis([server.py], # flask入口pathex[],binaries[], datas[("E:/**/templates","/templates"),("E:/**/s…...

编程日记 2023/8/3 23:37:00

无代码开发（BIP旗舰版-YonBuilder）

目录 我的应用 新建领域 菜单管理 应用构建 新建应用 对象建模 新增业务对象 新增业务实体 页面建模 新增页面 编辑页面 发布管理 我的应用 角色管理 yonbuilder开发平台&#xff0c;提供标准服务和专业开发服务&#xff1b; 本篇文章只演示标准服务的可视化应用…...

编程日记 2023/8/3 23:35:57

誉天程序员-瀑布模型-敏捷开发模型-DevOps模型比较

文章目录 2. 项目开发-开发方式2.1. 瀑布开发模型2.2. 敏捷开发模型2.3. DevOps开发模型2.4. 区别 自增主键策略1、数据库支持主键自增自增和uuid方案优缺点 2. 项目开发-开发方式 由传统的瀑布开发模型、敏捷开发模型&#xff0c;一跃升级到DevOps开发运维一体化开发模型。 …...

编程日记 2023/8/3 23:34:55

flutter：占位视图（骨架屏、shimmer）

前言 有时候打开美团&#xff0c;在刚加载数据时会显示一个占位视图&#xff0c;如下&#xff1a; 那么这个是如何实现的呢&#xff1f;我们可以使用shimmer来开发该功能 实现 官方文档 https://pub-web.flutter-io.cn/packages/shimmer 安装 flutter pub add shimmer示例…...

编程日记 2023/8/3 23:33:54

【雕爷学编程】MicroPython动手做（30）——物联网之Blynk 4

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…...

编程日记 2023/8/3 23:32:53

python-网络爬虫.BS4

BS4 Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库&#xff0c; 它能够通过你喜欢的转换器实现惯用的文档导航、查找、修改文档的方 式。 Beautiful Soup 4 官方文档&#xff1a;https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/ 帮助手册&…...

编程日记 2023/8/3 23:31:52

Windows下WVP+ZLMediaKit联动实战：5分钟搞定GB28181摄像头接入（附端口避坑清单）

Windows下WVPZLMediaKit联动实战&#xff1a;5分钟搞定GB28181摄像头接入&#xff08;附端口避坑清单&#xff09; 在智能视频监控领域&#xff0c;GB28181协议作为国家标准协议&#xff0c;正在成为设备互联的主流选择。但对于刚接触这一领域的开发者来说&#xff0c;从零开始…...

编程新知 2026/4/1 9:13:36

it-tools：Docker一键部署，中文界面即开即用

1. 为什么选择Docker部署it-tools&#xff1f; 最近在帮团队搭建开发环境时&#xff0c;发现很多同事都在反复安装各种零散的小工具——JSON格式化、时间戳转换、密码生成器...既占用本地资源又难以统一管理。直到发现了it-tools这个神器&#xff0c;它把200实用工具打包成Web应…...

编程新知 2026/4/1 8:02:03

终极指南：如何用智能工具轻松突破内容访问限制

终极指南&#xff1a;如何用智能工具轻松突破内容访问限制 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 内容访问突破工具是现代数字工作者的必备利器&#xff0c;它能帮助研究人员…...

编程新知 2026/4/1 8:02:03

Qwen3.5-4B-Claude模型Java微服务集成指南：SpringBoot实战案例

Qwen3.5-4B-Claude模型Java微服务集成指南&#xff1a;SpringBoot实战案例 1. 引言&#xff1a;当大模型遇上微服务 最近在开发企业知识管理系统时&#xff0c;我们遇到了一个典型需求&#xff1a;如何让传统Java微服务架构与前沿的大语言模型无缝集成。经过多次尝试&#xf…...

编程新知 2026/4/1 7:33:23

Pixel Aurora Engine效果展示：青蓝+明黄配色系像素画作视觉冲击力解析

Pixel Aurora Engine效果展示&#xff1a;青蓝明黄配色系像素画作视觉冲击力解析 1. 视觉震撼力解析 Pixel Aurora Engine通过精心设计的青蓝明黄配色方案&#xff0c;创造出极具视觉冲击力的像素艺术作品。这种色彩组合源自经典16位游戏的美学理念&#xff0c;但通过现代AI技…...

编程新知 2026/4/1 7:06:42

长上下文与RAG

读到一篇探讨RAG技术的文章&#xff0c;很受用&#xff0c;遂记录一下。核心结论&#xff1a;RAG不会被无限上下文取代。 原文地址&#xff1a;LLM无限上下文了&#xff0c;RAG&#xff08;Retrieval Augmented Generation&#xff09;还有意义吗&#xff1f; - 今日头条 以下…...

编程新知 2026/4/1 6:54:09

GAN训练过程可视化神器对比：GAN Lab和TensorFlow Playground到底怎么选？

GAN训练可视化工具深度评测&#xff1a;从交互设计到教学效果的全面对比 当开发者第一次接触生成对抗网络&#xff08;GAN&#xff09;时&#xff0c;往往会被其复杂的对抗训练机制所困扰。传统的静态图表和数学公式很难直观展示生成器与判别器之间微妙的博弈过程。这正是可视化…...

编程新知 2026/4/1 6:19:31

SEO_SEO优化常见误区及正确操作指南

SEO优化常见误区 在互联网时代&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;已成为网站运营中不可或缺的一部分。很多人在实际操作中却常常犯下一些常见的SEO优化误区&#xff0c;这不仅影响了网站的流量&#xff0c;也可能导致搜索引擎的惩罚。下面我们将详细分析这些…...

编程新知 2026/4/1 6:17:26

Ubuntu 虚拟机 Python3 + pip 完整安装教程

文章目录一、先检查系统是否自带 Python3二、安装 Python3 和 pip&#xff08;必装&#xff09;1. 更新软件源2. 安装 python3 和 pip3. 验证安装成功三、最简单的使用方法1. 运行 Python2. 用 pip 安装第三方库&#xff08;如 requests、numpy&#xff09;3. 运行 .py 文件四、…...

编程新知 2026/4/1 6:03:21

终极英雄联盟工具集：3大核心功能让你轻松掌控游戏全局

终极英雄联盟工具集&#xff1a;3大核心功能让你轻松掌控游戏全局 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Toolkit…...

编程新知 2026/4/1 5:12:54