前端框架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，然后执…...
前端倒计时误差!
提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
基于当前项目通过npm包形式暴露公共组件
1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹，并新增内容 3.创建package文件夹...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
：观察者模式)
JS设计模式(4)：观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中࿰…...
【无标题】路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构：基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中（图1）： mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅
目录 前言 操作系统与驱动程序 是什么，为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中，我们在使用电子设备时，我们所输入执行的每一条指令最终大多都会作用到硬件上，比如下载一款软件最终会下载到硬盘上&am…...
从物理机到云原生：全面解析计算虚拟化技术的演进与应用
前言：我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM（Java Virtual Machine）让"一次编写，到处运行"成为可能。这个软件层面的虚拟化让我着迷，但直到后来接触VMware和Doc…...
GraphQL 实战篇：Apollo Client 配置与缓存
GraphQL 实战篇：Apollo Client 配置与缓存 上一篇：GraphQL 入门篇：基础查询语法 依旧和上一篇的笔记一样，主实操，没啥过多的细节讲解，代码具体在： https://github.com/GoldenaArcher/graphql…...
使用SSE解决获取状态不一致问题
使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件，这个上传文件是整体功能的一部分，文件在上传的过程中…...
人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型
在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重，适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解，并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...