前端框架Vue学习 ——（二）Vue常用指令
文章目录
- 常用指令
常用指令
指令: HTML 标签上带有 “v-” 前缀的特殊属性，不同指令具有不同含义。例如: v-if, v-for…
常用指令：
- v-bind：为 HTML 标签绑定属性值，如设置 href，css 样式等
<a v-bind:href="url">测试</a>
可以简写为：
<a :href="url">测试</a>
- v-model：在表单元素上创建双向数据绑定
<input type="text" v-model="url">
为其绑定数据模型
<script>
new Vue({el: "#app" ,data: {url: "https://www.baidu.com"}
})
</script>
注意：通过 v-bind 或者 v-model 绑定的变量，必须在数据模型中声明。
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>VUE-快速入门</title><script src="js/vue.js"></script>
</head>
<body><div id="app"><div><input type="text" v-model="message">{{message}}</div><div><a :href="url">链接</a><input type="text" v-model="url" /></div></div>
</body>
<script>// 定义 Vue 对象new Vue({el: "#app", // Vue 接管区域data: {message: "Hello VUE",url: "https://www.baidu.com"}})
</script>
</html>
- v-on：为 HTML 标签绑定事件（v-click、v-blur、v-focus）
<input type= "button" value="点我" v-on:click="handle()">
可以简化为：
<input type="button" value= "点我" @click= "handle()">
<script>
new Vue({el: " #app",data: {//...},methods: {handle: function(){alert('我被点去了');}}
})
</script>
- v-if：添加性的渲染某元素，判断为 true 时渲染，否则不渲染
年龄{{age}},经判定为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>
- v-show：根据条件展示某元素，区别在于切换的是 display 属性 的值
年龄{{age}},经判定为:
<span v-show="age <= 35">年轻人</span>
- v-for：列表渲染，遍历容器的元素或者对象的属性
<div v-for="addr in addrs">{{addr}}</div>
<div v-for=" (addr,index) in addrs">{{index + 1}} : {{addr}}</div>
data: {addrs: ['北京','上海','广州'， '深圳', '成都','杭州']
},
相关文章：
前端框架Vue学习 ——（二）Vue常用指令
文章目录 常用指令 常用指令 指令: HTML 标签上带有 “v-” 前缀的特殊属性，不同指令具有不同含义。例如: v-if, v-for… 常用指令： v-bind：为 HTML 标签绑定属性值，如设置 href，css 样式等 <a v-bind:href"…...
Linux 指令心法（十四）`flash_erase` 擦除Flash存储器
文章目录 flash_erase 作用flash_erase的主要特点和使用场景flash_erase命令应用方法flash_erase命令可以解决哪些问题?flash_erase命令使用时注意事项 flash_erase 作用 这是一个用于擦除Flash存储器的命令。它可以擦除指定的Flash块或扇区，以便在写入新数据之前…...
GoLong的学习之路（二十一）进阶，语法之并发（go最重要的特点）（协程的主要用法）
并发编程在当前软件领域是一个非常重要的概念，随着CPU等硬件的发展，我们无一例外的想让我们的程序运行的快一点、再快一点。Go语言在语言层面天生支持并发，充分利用现代CPU的多核优势，这也是Go语言能够大范围流行的一个很重要的原…...
加快网站收录 3小时百度收录新站方法
加快网站收录 3小时百度收录新站方法 3小时百度收录新站方法说起来大家可能不相信，但这确实是真实的(该方法是通过技术提交，让百度快速抓取收录您的网站，不管你网站有没有备案，都能在短时间内被收录，要是你的网站迟迟不…...
GPT实战系列-ChatGLM3本地部署CUDA11+1080Ti+显卡24G实战方案
目录 一、ChatGLM3 模型 二、资源需求 三、部署安装 配置环境 安装过程 低成本配置部署方案 四、启动 ChatGLM3 五、功能测试 新鲜出炉，国产 GPT 版本迭代更新啦~清华团队刚刚发布ChatGLM3，恰逢云栖大会前百川也发布Baichuan2-192K，一…...
图片怎么转换成pdf？
图片怎么转换成pdf？图片可以转换成PDF格式文档吗？当然是可以的呀，当图片转换成PDF文件类型时，我们就会发现图片更加方便的打开分享和传播，而且还可以更加安全的保证我们的图片所有性。我们知道PDF文档是可以加密的&…...
【源码】医学影像PACS实现三维影像后处理等功能
医学影像诊断技术近年来取得了快速发展，包括高性能的影像检查设备的临床应用和数字信息技术的图像显示、存储、传输、处理、识别，这些技术使得计算机辅助检测和诊断成为可能，同时人工智能影像诊断也进入了人们的视野。这些技术进步提高了疾病…...
DOCTYPE是什么，有何作用、 使用方式、渲染模式、严格模式和怪异模式的区别？
前言 持续学习总结输出中，今天分享的是DOCTYPE是什么，有何作用、 使用方式、渲染模式、严格模式和怪异模式的区别。 DOCTYPE是什么，有何作用？ DOCTYPE是HTML5的文档声明，通过它可以告诉浏览器，使用那个H…...
Go语言实现HTTP正向代理
文章目录 前言实现思路代码实现 前言 正向代理（Forward Proxy）是一种代理服务器的部署方式，它位于客户端和目标服务器之间，代表客户端向目标服务器发送请求。正向代理可以用来隐藏客户端的真实身份，以及在不同网络环境…...
第11章_数据处理之增删改
文章目录 1 插入数据1.1 实际问题1.2 方式 1：VALUES的方式添加1.3 方式2：将查询结果插入到表中演示代码 2 更新数据演示代码 3 删除数据演示代码 4 MySQL8新特性：计算列演示代码 5 综合案例课后练习 1 插入数据 1.1 实际问题 解决方式&#…...
数据时代的新引擎：数据治理与开发，揭秘数据领域的黄金机遇！
文章目录 一、数据时代的需求二、数据治理与开发三、案例分析四、黄金机遇《数据要素安全流通》《Python数据挖掘：入门、进阶与实用案例分析》《数据保护：工作负载的可恢复性 》《Data Mesh权威指南》《分布式统一大数据虚拟文件系统 Alluxio原理、技术与…...
使用 Golang 实现基于时间的一次性密码 TOTP
上篇文章详细讲解了一次性密码 OTP 相关的知识，基于时间的一次性密码 TOTP 是 OTP 的一种实现方式。这种方法的优点是不依赖网络，因此即使在没有网络的情况下，用户也可以生成密码。所以这种方式被许多流行的网站使用到双因子或多因子认证中&a…...
微服务之Nacos配置管理
文章目录 一、统一配置管理Nacos操作二、统一配置管理java操作1.引入依赖2.创建配置文件3.测试4.总结 三、Nacos配置自动更新1.添加注解RefreshScope2.使用ConfigurationProperties注解3.总结 四、Nacos多环境配置共享1.配置文件2.多种配置的优先级3.总结 一、统一配置管理Naco…...
PySpark 优雅的解决依赖包管理
背景 平台所有的Spark任务都是采用Spark on yarn cluster的模式进行任务提交的，driver和executor随机分配在集群的各个节点，pySpark 由于python语言的性质，所以pySpark项目的依赖注定不能像java/scala项目那样把依赖打进jar包中轻松解决问题…...
UNI-APP_获取手机品牌
在uni-app中，使用uni.getSystemInfoSync().brand可以获取设备的品牌信息。根据不同设备的品牌，uni.getSystemInfoSync().brand可能返回以下一些常见值 “Apple” - 苹果 “Samsung” - 三星 “Huawei” - 华为 “Xiaomi” - 小米 “OPPO” - OPPO “Vivo…...
新登录接口独立版变现宝升级版知识付费小程序-多领域素材资源知识变现营销系统
源码简介： 资源入口 点击进入 源码亲测无bug，含前后端源码，非线传，修复最新登录接口 梦想贩卖机升级版，变现宝吸取了资源变现类产品的很多优点，摒弃了那些无关紧要的东西，使本产品在运营和变现…...
「掌握创意，释放想象」——Photoshop 2023，你的无限可能！
Adobe Photoshop 2023(PS2023) 来了,全世界数以百万计的设计师、摄影师和艺术家使用 Photoshop 将不可能变为可能。从海报到包装，从基本的横幅到漂亮的网站，从令人难忘的徽标到引人注目的图标，Photoshop 2023让创意世界不断前进。借助直观的工…...
SQLSugar查询返回DataTable
SQLSugar是一个用于执行SQL查询的C#库，它提供了简单易用的API接口来执行SQL查询。要查询返回DataTable，可以使用SQLSugar的QueryHelper类。 以下是一个示例代码，展示了如何使用SQLSugar的QueryHelper类查询返回DataTable： 首先&…...
企业微信开启接收消息+验证URL有效性
企业微信开启接收消息验证URL有效性 📔 千寻简笔记介绍 千寻简笔记已开源，Gitee与GitHub搜索chihiro-notes，包含笔记源文件.md，以及PDF版本方便阅读，且是用了精美主题，阅读体验更佳，如果文章对…...
电脑访问不到在同网络的手机设备
手机连接了同网络的wifi，但是电脑ping不通手机的ip，这可能是路由出了问题，因为最终是走的mac地址，访问不了是因为电脑不知道手机的mac地址，则可以这样设置绑定mac地址，管理员权限启动cmd，然后执…...
OpenClaw多任务队列：GLM-4.7-Flash并行处理邮件整理与文档生成
OpenClaw多任务队列：GLM-4.7-Flash并行处理邮件整理与文档生成 1. 为什么需要多任务队列 上周五下午，我同时面临三个紧急任务：整理客户邮件、生成季度报告草稿、汇总项目会议纪要。手动切换不同工具时，不仅效率低下，…...
从清洗到展示：一份完整的微博评论LDA分析Jupyter Notebook实战笔记（附避坑点）
从清洗到展示：一份完整的微博评论LDA分析Jupyter Notebook实战笔记（附避坑点） 在数据爆炸的时代，社交媒体评论中蕴藏着大量有价值的用户观点。本文将带你用Jupyter Notebook完整走通微博评论的主题分析流程，从原始数据…...
别再只用SVG了！用Vue3 + Konva给你的后台管理系统加个流程图编辑器（附完整代码）
Vue3 Konva实战：打造高交互流程图编辑器的完整方案 在后台管理系统开发中，流程图编辑器是提升业务配置效率的利器。传统SVG方案在复杂交互场景下常遇到性能瓶颈，而基于Canvas的Konva库配合Vue3的响应式特性，能轻松实现流畅的拖拽…...
电动循迹小车坡道行驶系统设计与实现
1. 坡道行驶电动小车设计解析1.1 系统概述本设计实现了一款具备坡道行驶能力的电动循迹小车系统，采用差速转向方案完成固定路径的循迹功能。系统核心功能包括：四路光电传感器黑线检测差速转向控制算法可编程坡道动力补偿自动停车功能2. 硬件设计2.1 主控…...
Python金融数据获取终极指南：用mootdx高效处理通达信股票数据
Python金融数据获取终极指南：用mootdx高效处理通达信股票数据 【免费下载链接】mootdx 通达信数据读取的一个简便使用封装 项目地址: https://gitcode.com/GitHub_Trending/mo/mootdx 在量化投资和金融数据分析领域，获取稳定、免费的股票数据一直…...
3分钟从想法到3D模型：Hunyuan3D-2如何帮你实现创作自由
3分钟从想法到3D模型：Hunyuan3D-2如何帮你实现创作自由 【免费下载链接】Hunyuan3D-2 High-Resolution 3D Assets Generation with Large Scale Hunyuan3D Diffusion Models. 项目地址: https://gitcode.com/GitHub_Trending/hu/Hunyuan3D-2 想象一下&#x…...
高效构建分布式AI智能体系统：AutoGen架构深度解析与实战指南
高效构建分布式AI智能体系统：AutoGen架构深度解析与实战指南 【免费下载链接】autogen 启用下一代大型语言模型应用 项目地址: https://gitcode.com/GitHub_Trending/au/autogen AutoGen是一个革命性的多智能体对话框架，专为简化基于大型语言模型…...
Web3j区块链开发实战：Java开发者的以太坊交互指南
Web3j区块链开发实战：Java开发者的以太坊交互指南 【免费下载链接】web3j Lightweight Java and Android library for integration with Ethereum clients 项目地址: https://gitcode.com/gh_mirrors/we/web3j 1. 核心价值解析：Web3j为何成为Java…...
【Unity实战】利用Preserve特性解决代码裁剪导致的反射调用失效问题
1. 代码裁剪与反射调用的相爱相杀 第一次遇到这个问题是在去年做手游项目的时候。那天测试同事急匆匆跑过来说："哥，安卓包加载存档直接闪退！"我心想编辑器里明明好好的，怎么打包就出问题？打开日志一看&#…...
【深度学习新浪潮】如何安全、可靠地使用OpenClaw？
前言 当下AI智能体赛道飞速发展，OpenClaw凭借本地私有化部署、系统级实操能力、多模型兼容的核心优势，成为开发者、办公人群追捧的自动化工具。它可以调度浏览器、执行文件操作、运行终端脚本、串联多步骤业务流程，真正实现大语言模型从对话交互到落地执行的跨越。 但很多…...