前端框架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，然后执…...
多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言：多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...
MySQL 隔离级别：脏读、幻读及不可重复读的原理与示例
一、MySQL 隔离级别 MySQL 提供了四种隔离级别，用于控制事务之间的并发访问以及数据的可见性，不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式，具体如下： 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交（READ UNCOMMITTED）允许出现允许…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
【Linux】C语言执行shell指令
在C语言中执行Shell指令 在C语言中，有几种方法可以执行Shell指令： 1. 使用system()函数 这是最简单的方法，包含在stdlib.h头文件中： #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件 的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...
WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）
一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解，适合用作学习或写简历项目背景说明。 🧠 一、概念简介：Solidity 合约开发 Solidity 是一种专门为 以太坊（Ethereum）平台编写智能合约的高级编…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...
「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下，推客小程序系统凭借其裂变传播、精准营销等特性，成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径，助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息：libc.so.6: cannot open shared object file: No such file or directory： #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...
前端高频面试题2：浏览器/计算机网络
本专栏相关链接 前端高频面试题1：HTML/CSS 前端高频面试题2：浏览器/计算机网络 前端高频面试题3：JavaScript 1.什么是强缓存、协商缓存？ 强缓存： 当浏览器请求资源时，首先检查本地缓存是否命中。如果命…...