Vue.js 指令详解:v-bind, v-html, v-once, v-on, v-if, v-else-if, v-else 和 v-model

Vue.js 是一个用于构建用户界面的渐进式框架,它通过一系列的指令来实现数据与 DOM 的绑定。在本篇博客中,我们将通过一个示例来介绍 Vue 3 中的一些常用指令:v-bind, v-html, v-once, v-on, v-if, v-else-if, v-elsev-model

1. v-bind:动态地绑定一个或多个属性

v-bind 指令用于动态地绑定一个组件 prop 或一个组件 attribute 到表达式。它的简写是 :

<h1 :id="id1">这里是模板的内容:<span v-html="cunntHTML"></span>次单击</h1>

在这个例子中,id1 的值将被绑定到 h1 标签的 id 属性上。

2. v-html:将 HTML 字符串渲染为真实的 HTML 内容

v-html 指令用于将绑定值作为 HTML 内容渲染。

<span v-html="cunntHTML"></span>

这里,cunntHTML 中的 HTML 标签将被解析并显示为红色文本。

3. v-once:只绑定一次数据

v-once 指令用于进行一次性地插值。当数据变化时,插值处的内容不会更新。

<h1 :id="id1" v-once>Hello, World</h1>

4. v-on:监听 DOM 事件

v-on 指令用于在元素上监听 DOM 事件。它的简写是 @

<button @click="clickButton">按钮</button>

这里,当按钮被点击时,clickButton 方法将被调用。

5. v-if:条件性地渲染一块内容

v-if 指令用于根据表达式的真假条件渲染一块内容。

<div v-if="show"><hi>show</hi></div>

如果 show 的值为 true,则显示 div 内的内容。

6. v-else-if 和 v-else:v-if 的“else if”和“else”块

<h1 v-if="mark==100">满分</h1>
<h1 v-else-if="mark>=60">及格</h1>
<h1 v-else>不及格</h1>

这里,根据 mark 的值,将显示不同的 h1 标签内容。

7. v-model:在表单控件元素上创建双向数据绑定

v-model 指令在表单控件元素上创建双向数据绑定。

<div><input v-model.trim="content"></div>

这里,content 的值将与输入框的值同步,并且 trim 修饰符会移除输入的首尾空格。

完整示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue.js 指令示例</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application" style="text-align: center;"><h1 :id="id1">这里是模板的内容:<span v-html="cunntHTML"></span>次单击</h1><h1 :id="id1">这里是模板的内容:{{ count + 10 }}次单击</h1><h1 :id="id1" v-once>Hello, World</h1><button @click="clickButton">按钮</button><div v-if="show"><hi>show</hi></div><div><input v-model.trim="content"></div><div><h1 v-if="mark==100">满分</h1><h1 v-else-if="mark>=60">及格</h1><h1 v-else>不及格</h1></div>
</div>
<script>const App = {data() {return {count: 0,cunntHTML: '<span style="color: red;">0</span>',id1: "h1",show: true,mark: 30,content: ''}},methods: {clickButton() {this.count++;}}};Vue.createApp(App).mount("#Application");
</script>
</body>
</html>

结论

Vue.js 的指令为开发者提供了一种声明式的方法来处理数据和 DOM 的交互。通过本篇博客的示例,我们了解了如何使用 v-bind, v-html, v-once, v-on, v-if, v-else-if, v-elsev-model 这些指令来构建动态和交互式的用户界面。Vue 的这些指令不仅使得代码更加简洁,而且提高了开发效率。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/62015.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【es6】原生js在页面上画矩形添加选中状态高亮及显示调整大小控制框(三)

接上篇文章&#xff0c;这篇实现下选中当前元素显示调整大小的控制框&#xff0c;点击document取消元素的选中高亮状态效果。 实现效果 代码逻辑 动态生成控制按钮矩形,并设置响应的css // 动态添加一个调整位置的按钮addScaleBtn(target) {const w target.offsetWidth;con…

文心一言与千帆大模型平台的区别:探索百度AI生态的双子星

随着人工智能技术的迅猛发展&#xff0c;越来越多的公司开始投入资源开发自己的AI解决方案。在中国&#xff0c;百度作为互联网巨头之一&#xff0c;不仅在搜索引擎领域占据重要位置&#xff0c;还在AI领域取得了显著成就。其中&#xff0c;“文心一言”和“千帆大模型平台”便…

【西瓜书】神经网络-MP神经元、感知机和多层网络

神经网络&#xff08;neural networks&#xff09;的定义&#xff1a;神经网络是由具有适应性的简单单元组成的广泛并行互联的网络&#xff0c;它的组织能够模拟生物神经系统对真实世界物体所作出的交互反应。&#xff08;T. Kohonen 1988年在Neural Networks创刊号上给出的定义…

Java的日期和时间的格式化

目录 引言 使用SimpleDateFormat 使用DateTimeFormatter 格式化模式 注意事项 引言 在Java中&#xff0c;日期和时间的格式化是通过java.text.SimpleDateFormat类或更现代的java.time.format.DateTimeFormatter类来实现的。随着Java 8的发布&#xff0c;推荐使用java.time…

Linux进程与资源管理

在Linux学习&#xff0c;进行各种操作过程中需要用到很多种命令&#xff0c;本篇主要讲Linux进程与资源管理命令仅供大家参考。绝对是干货满满的一篇文章&#xff01;&#xff01;&#xff01; Linux进程与资源管理命令&#xff1a; 提示&#xff1a;以下是本篇文章正文内容&am…

《基于FPGA的便携式PWM方波信号发生器》论文分析(三)——数码管稳定显示与系统调试

一、论文概述 基于FPGA的便携式PWM方波信号发生器是一篇由任青颖、庹忠曜、黄洵桢、李智禺和张贤宇 等人发表的一篇期刊论文。该论文主要研究了一种新型的信号发生器&#xff0c;旨在解决传统PWM信号发生器在移动设备信号调控中存在的精准度低和便携性差的问题 。其基于现场可编…

一个专为云原生环境设计的高性能分布式文件系统

大家好&#xff0c;今天给大家分享一款开源创新的分布式 POSIX 文件系统JuiceFS&#xff0c;旨在解决海量云存储与各类应用平台&#xff08;如大数据、机器学习、人工智能等&#xff09;之间高效对接的问题。 项目介绍 JuiceFS 是一款面向云原生设计的高性能分布式文件系统&am…

【JavaScript】图解JS中的字符串方法

&#x1f4af; 欢迎光临清清ww的博客小天地&#x1f4af; &#x1f525; 个人主页:【清清ww】&#x1f525; &#x1f4da; 系列专栏:vue3 | TypeScript &#x1f4da; &#x1f31f; 学习本无底&#xff0c;前进莫徬徨。&#x1f31f; 目录 一.字符串查找 1.length属性 2. i…

ffmpeg视频滤镜:替换部分帧-freezeframes

滤镜描述 freezeframes 官网地址 > FFmpeg Filters Documentation 这个滤镜接收两个输入&#xff0c;然后会将第一个视频中的部分帧替换为第二个视频的某一帧。 滤镜使用 参数 freezeframes AVOptions:first <int64> ..FV....... set first fra…

云计算-华为HCIA-学习笔记

笔者今年7月底考取了华为云计算方向的HCIE认证&#xff0c;回顾从IA到IE的学习和项目实战&#xff0c;想整合和分享自己的学习历程&#xff0c;欢迎志同道合的朋友们一起讨论&#xff01; 第三章&#xff1a;常见设备 交换机 二层交换机和三层交换机&#xff0c;所谓二层交换机…

问题记录-Java后端

问题记录 目录 问题记录1.多数据源使用事务注意事项&#xff1f;2.mybatis执行MySQL的存储过程&#xff1f;3.springBoot加载不到nacos配置中心的配置问题4.服务器产生大量close_wait情况 1.多数据源使用事务注意事项&#xff1f; 问题&#xff1a;在springBoot项目中多表处理数…

瑞派宠物医生 | 热爱与实践交织,专注宠物口腔健康

热爱与实践交织的兽医梦 瑞派上海乔登宠物医院院长陈德举自小便与赛鸽结下了不解之缘&#xff0c;家族中饲养赛鸽的传统不仅让他对鸟类产生了浓厚的兴趣&#xff0c;更在心中埋下了成为一名兽医的种子。在面临高考这一人生重要抉择时&#xff0c;他毫不犹豫地选择了兽医专业&am…

即时通讯服务器被ddos攻击了怎么办?

攻击即时通讯系统的主要手段 击键记录 目前盗取即时通讯工具帐号信息的最主要方法是通过特洛伊木马等恶意软件&#xff0c;例如QQ木马&#xff0c;这类程序能够盗取QQ密码信息&#xff0c;常见的能够盗取最新版本QQ密码的木马程序有十几种之多。几乎所有主要的QQ木马程序都采…

sklearn中常用数据集简介

scikit-learn库中提供了包括分类、回归、聚类、降维等多种机器学习任务所需的常用数据集&#xff0c;方便进行实验和研究&#xff0c;它们主要被封装在sklearn.datasets中&#xff0c;本文对其中一些常用的数据集进行简单的介绍。 1.Iris&#xff08;鸢尾花&#xff09;数据集…

【AIGC】如何准确引导ChatGPT,实现精细化GPTs指令生成

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AIGC | 提示词Prompt应用实例 文章目录 &#x1f4af;前言&#x1f4af;准确引导ChatGPT创建爆款小红书文案GPTs指令案例&#x1f4af; 高效开发GPTs应用的核心原则明确应用场景和目标受众构建多样化风格模板提问与引…

json格式数据集转换成yolo的txt格式数据集

这个代码是参考了两个博客 我是感觉第一篇博客可能有问题&#xff0c;然后自己做了改进&#xff0c;如果我是错误的或者正确的&#xff0c;请各位评论区说一下&#xff0c;感谢 Json格式的数据集标签转化为有效的txt格式(data_coco)_train.json-CSDN博客 COCO&#xff08;.j…

Java面试之多线程并发篇

前言 本来想着给自己放松一下&#xff0c;刷刷博客&#xff0c;突然被几道面试题难倒&#xff01;说一说自己对于 synchronized 关键字的了解&#xff1f;说说自己是怎么使用 synchronized 关键字&#xff1f;什么是线程安全&#xff1f;Vector是一个线程安全类吗&#xff1f;…

Ajax学习笔记,第一节:语法基础

Ajax学习笔记&#xff0c;第一节&#xff1a;语法基础 一、概念 1、什么是Ajax 使用浏览器的 XMLHttpRequest 对象 与服务器通信2、什么是axios Axios是一个基于Promise的JavaScript库&#xff0c;支持在浏览器和Node.js环境中使用。相较于Ajax&#xff0c;Axios提供了更多…

【ONE·基础算法 || 动态规划(二)】

总言 主要内容&#xff1a;编程题举例&#xff0c;熟悉理解动态规划类题型&#xff08;子数组、子序列问题&#xff09;。                文章目录 总言5、子数组问题&#xff08;数组中连续的一段&#xff09;5.1、最大子数组和&#xff08;medium&#xff09;5.1.…

Python人工智能项目报告

一、实践概述 1、实践计划和目的 在现代社会&#xff0c;计算机技术已成为支撑社会发展的核心力量&#xff0c;渗透到生活的各个领域&#xff0c;应关注人类福祉&#xff0c;确保自己的工作成果能够造福社会&#xff0c;同时维护安全、健康的自然环境&#xff0c;设计出具有包…