前端框架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，然后执…...
Cursor实现用excel数据填充word模版的方法
cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例，…...
Linux 文件类型，目录与路径，文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件：-（纯文本文件，二进制文件，数据格式文件） 如文本文件、图片、程序文件等。 目录文件：d（directory） 用来存放其他文件或子目录。 设备…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框，很难让人不联想到SQL注入，但提示都说了不是SQL注入，所以就不往这方面想了 先查看一下网页源码，发现一段JavaScript代码，有一个关键类ctfs…...
2025盘古石杯决赛【手机取证】
前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来，实在找不到，希望有大佬教一下我。 还有就会议时间，我感觉不是图片时间，因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...
SpringCloudGateway 自定义局部过滤器
场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展，AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术，在客户服务、营销推广、信息查询等领域发挥着越来越重要…...
关于easyexcel动态下拉选问题处理
前些日子突然碰到一个问题，说是客户的导入文件模版想支持部分导入内容的下拉选，于是我就找了easyexcel官网寻找解决方案，并没有找到合适的方案，没办法只能自己动手并分享出来，针对Java生成Excel下拉菜单时因选项过多导…...