Vue常用内置指令，代码Demo演示和讲解
文章目录
- 一、v-text
- 二、v-html
- 三、v-bind
- 四、v-model
- 五、v-on
- 六、v-show
- 七、v-if、v-else
- 八、v-for
- 九、v-cloak
一、v-text
- 作用，更改标签的显示值
- 使用 v-text 会读取 data中的变量值
- 如果变量存在替换原来的值，如果不存在则报错
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>初识v-text</title><!-- 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head><body><!-- 准备好一个容器 --><div id="demo"><h1 v-text="msg">旧数据</h1></div><script>let vm = new Vue({el: "#demo",data: {msg: '新数据'}})</script>
</body>
</html>
- 页面结果
二、v-html
- v-text 不会解析，v-html会解析然后显示
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>初识v-html</title><!-- 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head><body><!-- 准备好一个容器 --><div id="demo"><h1 v-text="msg"></h1><h1 v-html="msg"></h1></div><script>let vm = new Vue({el: "#demo",data: {msg: '<span>Hello Vue</span>'}})</script>
</body>
</html>
- 页面结果
三、v-bind
- 简写 :
- 作用是更改标签的属性值，值只会从data传向标签，不会从标签传向data，单向数据绑定
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>初识v-bind</title><!-- 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head><body><!-- 准备好一个容器 --><div id="demo"><a v-bind:href="school.url" >点我去{{school.name}}学习1</a><br><a :href="school.url" >点我去{{school.name}}学习2</a><br>显示data中name的值：<q v-text="name"></q><br/>单向数据绑定：<input type="text" :value="name"></div><script>let vm = new Vue({el: "#demo",data:{name:'jack',school:{name:'尚硅谷',url:'http://www.atguigu.com',}}})</script>
</body>
</html>
- 页面结果
四、v-model
- 本质是一个语法糖
- 作用是更改标签的属性值，双向绑定数据。使用上和 v-bind 很像，但是无法像 v-bind 那么灵活，v-bind 可以更改所有属性的值，v-model 只能更改默认属性（只有一个，所以属性名都不用写）。如果当前标签没有默认属性，使用 v-model 将会报错，比如标签 a。
- 它会根据控件类型自动选取正确的方法来更新属性值，但是不是所有标签都可以用 v-model ，有些标签没有找到对应的属性值将会报错
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>初识v-model</title><!-- 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head><body><!-- 准备好一个容器 --><div id="demo">显示data中name的值：<q>{{name}}</q><br/>单向数据绑定：<input type="text" :value="name"><br/>双向数据绑定：<input type="text" v-model="name"><br/>用v-bind写双向绑定：<input type="text" :value="name" @input="name = $event.target.value"></div><script>let vm = new Vue({el: "#demo",data:{name:'jack'}})</script>
</body>
</html>
- 页面结果
五、v-on
- 简写 @
- 作用：触发事件之后调用 v-on 设定的方法
- 如果标签不存在该事件，将报错
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>初识v-on</title><!-- 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head><body><!-- 准备好一个容器 --><div id="demo"><button v-on:click="showInfo1">点我提示信息1（不传参）</button><br><button @click="showInfo1">点我提示信息1（不传参），使用简写</button><br><button @click="showInfo2($event,66)">点我提示信息2（传参）</button></div><script>let vm = new Vue({el: "#demo",data:{},methods:{showInfo1(event){alert('同学你好！')},showInfo2(event,number){console.log(event)console.log(number)alert('同学你好！调用了showInfo2方法，number的值为：'+number)}}})</script>
</body>
</html>
- 页面结果
六、v-show
- 满足条件则显示，不对dom操作。适合频繁操作
- 原理是修改元素 的display，实现显示隐藏。当某个标签没有 display，v-show将会失效，比如 template
- 指令后面的内容，最终都会解析为布尔值
- 值为true元素显示，值为false元素隐藏
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>初识v-show</title><!-- 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head><body><!-- 准备好一个容器 --><div id="demo"><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button><h2 v-show="n === 1">您好，满足条件显示！</h2></div><script>let vm = new Vue({el: "#demo",data:{n:0}})</script>
</body>
</html>
- 页面结果
七、v-if、v-else
- 满足条件则显示，对dom操作。不适合频繁操作
- 指令后面的内容，最终都会解析为布尔值
- 值为true元素显示，值为false元素隐藏
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>初识v-if</title><!-- 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head><body><!-- 准备好一个容器 --><div id="demo"><h2>当前的n值是:{{n}}</h2><button @click="n++">点我n+1</button><template v-if="n === 1"><h2>您好，满足条件显示！</h2></template> <template v-else="n === 1"><h2>您好，不满足条件显示！</h2></template></div><script>let vm = new Vue({el: "#demo",data:{n:0}})</script>
</body>
</html>
- 页面结果
八、v-for
- 遍历数组或者list
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>初识v-for</title><!-- 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head><body><!-- 准备好一个容器 --><div id="demo"><h2 v-for="(item, index) in arr">{{index}}，名字为：{{item}}</h2></div><script>let vm = new Vue({el: "#demo",data:{arr:["张三","李四","王五"]}})</script>
</body>
</html>
- 页面显示
九、v-cloak
- 作用：防止闪烁，页面更加顺滑
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>初识v-cloak</title><!-- 引入Vue --><script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script><style>[v-cloak]{display:none;}</style>
</head><body><!-- 准备好一个容器 --><div id="demo"><h2 v-cloak>{{name}}</h2></div><script>let vm = new Vue({el: "#demo",data:{name:'尚硅谷'}})</script>
</body>
</html>
- 页面显示
相关文章：
Vue常用内置指令，代码Demo演示和讲解
文章目录 一、v-text二、v-html三、v-bind四、v-model五、v-on六、v-show七、v-if、v-else八、v-for九、v-cloak 一、v-text 作用，更改标签的显示值使用 v-text 会读取 data中的变量值如果变量存在替换原来的值，如果不存在则报错 <!DOCTYPE html>…...
Spring设计模式之工厂模式创建Bean对象
BeanFactory和Application是Spring容器中创建和管理Bean对象的接口，但是它们的实现方式不同。 BeanFactory： BeanFactory采用延迟初始化策略，只有应用程序向容器请求特定的Bean时才创建该Bean对象。它的启动速度很快，但在程序运…...
Elasticsearch 别名（Aliases）的作用
Elasticsearch 8.4.3 别名（Aliases） 一. 介绍二. 别名的优势三. 别名的基本操作3.1 创建别名3.2 查询别名关联的索引3.3 删除别名3.4 更新别名3.5 通过别名查询数据 前言 这是我在这个网站整理的笔记,有错误的地方请指出，关注我，接…...
基于vue的个性化推荐餐饮系统Springboot
项目：基于vue的个性化推荐餐饮系统Springboot 摘要 现代信息化社会下的数据管理对活动的重要性越来越为明显，人们出门可以通过网络进行交流、信息咨询、查询等操作。网络化生活对人们通过网上购物也有了非常大的考验，通过网上进行点餐的人也…...
量子计算：数据安全难题
当今数字技术面临的最大挑战之一是安全系统和数据。为此，人们设计了复杂的算法来加密数据并通过称为对称加密的框架来保护数据。虽然这已被证明是成功的，但量子计算的进步（利用量子力学比传统计算机更快地解决复杂问题）可能会彻底…...
CCF-B类SGP‘24 4月10日截稿！速速行动！
会议之眼 快讯 第22届SGP(Eurographics Symposium on Geometry Processing)即欧洲图形学几何处理专题讨论会将于 2024 年 6月24 -日至26日在美国麻省理工学院举行！SGP是传播几何处理新研究想法和尖端成果的首要学术会议。作为该领域的重要学术盛事，SGP会…...
阿里云服务器安装MySQL、Apache、PHP
节日期间突然想要自己搭建一个个人网站，于是在阿里云申请了一个可以免费使用3个月的服务器，申请的云市场产品Wordpress平台（ ALinux3 LNMP PHP7.4）。官方教程使用的CentOs系统，和我申请的ALinux3操作有一些差异&#x…...
Rust基础拾遗--并发和异步编程
Rust基础拾遗 前言1.并发1.1 分叉与合并并行1.1.1 启动与联结1.1.2 跨线程错误处理1.1.3 跨线程共享不可变数据1.1.4 rayon 1.2 通道1.2.1 发送值1.2.2 接收值1.2.3 运行管道1.2.4 通道的特性与性能1.2.5 线程安全：Send与Sync 1.3 共享可变状态 2.异步编…...
Javascript怎么输出内容？两种常见方式以及控制台介绍
javascript是一种非常重要的编程语言，在许多网页中它被广泛使用，可以实现许多交互效果和动态效果。输出是javascript中最基本的操作之一，下面将介绍两种常见的输出方式。 一、使用console.log()函数输出 console.log()函数是常用的输出函数…...
机器人路径平滑——线性插值
C++代码 //要实现平滑二维曲线的算法，你可以使用贝塞尔曲线或B样条曲线。下面是一个使用B样条曲线的C++算法的示例：#include <iostream> #include <vector> #include <fstream> #include <iomanip>...
2024-2-21-多线程基础作业
作业： 源代码： #include <myhead.h> #define MAXSIZE 64 //定义要传递的结构体类型 struct Info {const char *src;const char *dest;int len; }; int get_file_len(const char *srcfile, const char *destfile) {//以只读的形式打开源文件int sr…...
MySQL8的ONLY_FULL_GROUP_BY SQL模式兼容问题
文章目录 1. 问题描述2. 解决方法1. 修改查询2. 修改SQL模式3. 使用ANY_VALUE()函数 1. 问题描述 Cause: java.sql.SQLSyntaxErrorException: Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggregated column btc-cloud.t1.id which is not funct…...
Django使用Celery异步
安装包 pip install celerypip install eventlet 1.在项目文件的根目录下创建目录结果 2. 在main.py文件中 # !/usr/bin/env python # -*-coding:utf-8 -*-""" # Author ：skyTree # version ：python 3.11 # Description&#…...
vue3 + ts + echart 实现柱形图表
首先封装Echart一个文件 代码如下 <script setup lang"ts"> import { ECharts, EChartsOption, init } from echarts; import { ref, watch, onMounted, onBeforeUnmount } from vue;// 定义props interface Props {width?: string;height?: string;optio…...
c语言结构体与共用体
前面我们介绍了基本的数据类型 在c语言中 有一种特殊的数据类型 由程序员来定义类型 目录 一结构体 1.1概述 1.2定义结构体 1.3 结构体变量的初始化 1.4 访问结构体的成员 1.5结构体作为函数的参数 1.6指向结构的指针 1.7结构体大小的计算 二共用体 2.1概述 2.2 访…...
vue系列--vue封装拖拽指令v-drag
1.首先将下面的代码引入代码中 export const initVDrag (Vue) > {Vue.directive("drag", (el) > {const oDiv el // 当前元素const minTop oDiv.getAttribute("drag-min-top")const ifMoveSizeArea 20oDiv.onmousedown (e) > {let target …...
devc++ 使用 winsock 实现 UDP 局域网 WIFI 广播
参考链接 使用UDP发送广播报_udp广播 inaddr_broadcast-CSDN博客 UDP接收端收不到广播的消息问题排查_unity upd广播连接不上是什么情况-CSDN博客 如何禁用自己电脑的虚拟网卡-百度经验 (baidu.com) 但是wifi 会屏蔽255.255.255.255 广播地址，所以 255.255.255.2…...
JS实现根据数组对象的某一属性排序
JS实现根据数组对象的某一属性排序 一、冒泡排序（先了解冒泡排序机制）二、根据数组对象的某一属性排序（引用sort方法排序） 一、冒泡排序（先了解冒泡排序机制） 以从小到大排序为例，冒泡排序的原…...
CSP-J 2023 复赛第2题：公路 ← 贪心算法
【题目来源】https://www.luogu.com.cn/problem/P9749https://www.acwing.com/problem/content/5311/【题目描述】 小苞准备开着车沿着公路自驾。 公路上一共有 n 个站点，编号为从 1 到 n。 其中站点 i 与站点 i1 的距离为 vi 公里。 公路上每个站点都可以加油&…...
【LeetCode打卡】Day23|669. 修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树
学习目标： 669. 修剪二叉搜索树 108.将有序数组转换为二叉搜索树 538.把二叉搜索树转换为累加树 学习内容： 669. 修剪二叉搜索树 题目链接&&文章讲解 给你二叉搜索树的根节点 root ，同时给定最小边界low 和最大边界 high。通过修剪…...
多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度
一、引言：多云环境的技术复杂性本质 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时，基础设施的技术债呈现指数级积累。网络连接、身份认证、成本管理这三大核心挑战相互嵌套：跨云网络构建数据…...
【杂谈】-递归进化：人工智能的自我改进与监管挑战
递归进化：人工智能的自我改进与监管挑战 文章目录 递归进化：人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管？3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
进程地址空间（比特课总结）
一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量 全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环 境变量会⾃动传递给⼦进程。 本地变量限制：本地变量只在当前进程(ba…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
【论文阅读28】-CNN-BiLSTM-Attention-（2024）
本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...
2025季度云服务器排行榜
在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...
Java求职者面试指南：计算机基础与源码原理深度解析
Java求职者面试指南：计算机基础与源码原理深度解析 第一轮提问：基础概念问题 1. 请解释什么是进程和线程的区别？ 面试官：进程是程序的一次执行过程，是系统进行资源分配和调度的基本单位；而线程是进程中的…...
MFC 抛体运动模拟：常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...
嵌入式常见 CPU 架构
架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集，单周期执行；低功耗、CIP 独立外设；用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel（原始…...
什么是VR全景技术
VR全景技术，全称为虚拟现实全景技术，是通过计算机图像模拟生成三维空间中的虚拟世界，使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验，结合图文、3D、音视频等多媒体元素…...