vue常用指令及其作用

常用指令有:

内容渲染指令:v-html , v-text

作用:给元素添加内容

条件渲染指令:v-show , v-if , v-else , v-else-if

作用:控制元素是否显示与隐藏(v-else , v-else-if辅助v-if进行判断渲染,要紧挨着v-if使用)

事件绑定指令: v-on

作用:给元素注册事件

语法:v-on:事件名=' 内联语句 或 methods中的函数名'

简写:@事件名='内联语句 或 methods中的函数名'

methods函数内的js指向Vue实例

属性绑定指令: v-bind

作用:动态设置html的标签属性

语法:v-bind:属性名=' 表达式'

简写: :属性名=' 表达式'

双向绑定指令:v-model

作用:用于表单元素,数据和视图的双向改变

语法:v-model=’变量‘

v-model 相当于

文本框或密码框相当于 :value="数据"+@input="数据=$event.target.value"

复选框 : checked="数据"+@change="数据=$event.target.checked"

下拉列表 : selected="数据"+@change="数据=$event.target.selected"

列表渲染指令:v-for

作用:基于数据循环,多次渲染整个元素

v-for 要搭配 :key 使用

作用是:给循环列表项添加唯一标识,便于vue列表可以正确的复用,提高渲染性能,推荐是id,索引可能会改变,vue会默认原地修改元素(就地复用)

其中:v-if ,v-show 都可以控制元素的显示与隐藏

v-if :是通过js动态创建dom元素或删除元素,v-if可以与v-else , v-else-if搭配使用哦的

v-show:是通过css的display属性来控制元素的显示与隐藏

频繁切换元素显示与隐藏用v一show,其余可以用v-if

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

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

相关文章

【功能更新】支持文档合并导出PDF/HTML格式;线上文章SEO设置能力优化

HelpLook功能更新速览👇 文档管理能力: 1. 导出支持多篇文档合在一个HTML文件 2. 支持下载附件时保留原始文件名 3. 主页“推荐文章”支持添加外链 4. 文章URL根据标题自动生成 5. 文章支持添加“作者” 6. 博客模版支持置顶文章 1.导出支持多篇文…

通配符证书的优势有哪些?

在互联网安全的长河中,通配符证书以其独特的优势成为了许多网域管理员的首选。那么,它究竟有哪些魅力点呢?让我们从安全性、性价比和管理便捷性三个维度来解读一下。 安全性:标配的坚实防线 首先,从安全性角度来看&am…

邮件营销:定义、优势与策略指南

什么是邮件营销?跨境电商或者出海企业可能会经常使用它,它是传统的营销方式之一,在上世纪80年年代得以运用。 邮件营销,英文全称为Email Direct Marketing,缩写为EDM。它是指在收件人许可的情况下,通过电子…

前端开发新趋势:Web3、区块链和虚拟现实

目录 前言 Web3:下一代互联网 区块链技术 去中心化应用程序(DApps) 区块链:重塑数字世界 数字钱包 NFT(非同质化代币) 虚拟现实:沉浸式体验 WebVR和WebXR 三维图形 新挑战与机会 性…

final

final final关键字是最终的意思,可以修饰(类、方法、变量)修饰类:该类被称为最终类,特点是不能被继承了修饰方法:该方法被称为最终方法,特点是不能被重写了修饰变量:该变量只能被赋…

【SpringCloudAlibaba】Sentinel熔断限流工具的使用

一、前言 随着微服务的流行,服务和服务之间的稳定性变得越来越重要。Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件,主要以流量为切入点,从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维…

远程使用树莓派通过蓝牙播放音频文件方法

本文主要介绍远程使用树莓派通过蓝牙播放音频文件的方法。 1 环境 硬件:树莓派4b(piOS), 笔记本(windows10) 软件:mplayer(在Pi上下载), putty(笔记本上安装) 外设:蓝…

9.鸿蒙app用户界面的跳转abilityslice的跳转

9.用户界面的跳转abilityslice的跳转,值传递,数值累加 首页页面显示1,第2页显示2,再次点击返回首页3。。。 MainAbilitySlice.java 关键代码: 点击事件 text.setClickedListener(new Component.ClickedListener() …

【回溯】【DFS】51.N皇后

题目 class Solution {public List<List<String>> solveNQueens(int n) {List<List<String>> res new ArrayList<>();char[][] tmp new char[n][n];for (int i 0; i < n; i) {Arrays.fill(tmp[i], .);}dfs(tmp, 0, res);return res;}publ…

vector实现循环队列

顺序队列 顺序队列是一种先进先出的线性表&#xff0c;简称FIFO。允许插入的一端称为队尾&#xff0c;允许删除的一端称为队头。因为其入队和出队操作均是&#xff08;front/rear&#xff09;指针向后移动&#xff0c;以进行结点的链接和删除&#xff0c;这就造成其使用空间不断…

Redis数据结构简介

首先对redis来说&#xff0c;所有的key&#xff08;键&#xff09;都是字符串。我们在谈基础数据结构时&#xff0c;讨论的是存储值的数据类型&#xff0c;主要包括常见的5种数据类型&#xff0c;分别是&#xff1a;String、List、Set、Zset、Hash。 1.粉丝福利 最新很多同学问…

Vim中取消高亮显示的文本

在Vim中取消高亮显示的文本&#xff0c;可以使用以下方法&#xff1a; 临时取消高亮&#xff1a;在Normal模式下按下:&#xff08;冒号&#xff09;&#xff0c;然后输入nohlsearch&#xff0c;并按下Enter键。这将临时取消当前搜索结果的高亮显示。搜索结果仍然存在&#xff0…

高空作业MR混合现实情景实训教学应用

MR混合现实情景实训教学系统结合了虚拟现实和增强现实的优点&#xff0c;能够提供一种真实而丰富的环境&#xff0c;使学习者可以在其中进行模拟的高空作业。通过精确的传感器和高级算法&#xff0c;捕捉到学生的动作和环境变化&#xff0c;从而实时调整虚拟环境的反馈&#xf…

第5章-第1节-初识Java中的面向对象

1、面向对象和面向过程&#xff1a; 面向对象&#xff1a;(编程思想) 较晚出现 面向&#xff1a;看、关注、瞅 对象&#xff1a;个体、个例、实体、实例、结果 侧重点&#xff1a;关注结果 理解&#xff1a;将我们从劳动者变成了指挥者 > 解放程序员 面向过程&#xf…

开源音频处理代码 speex

Speex是一套主要针对语音的开源免费&#xff0c;无专利保护的音频压缩格式。 speex是近年来开发出的一套功能强大的语音引擎&#xff0c;能够实现高质量和低比特率的编码。它不仅提供了基于码激励线性预测&#xff08;CELP&#xff09;算法的编/解码模块&#xff0c;而且在其最…

使用SQL和Python处理Excel文件数据

目录 一、引言 二、使用SQL查询Excel文件数据 1、导入必要的库 2、创建数据库连接 3、读取Excel文件数据 4、将数据写入数据库 5、使用SQL查询数据 三、使用Python读取和处理Excel文件数据 1、导入必要的库 2、读取Excel文件数据 3、数据处理和分析 4. 将数据可视化…

ModuleNotFoundError: No module named ‘openai.error‘

ModuleNotFoundError: No module named ‘openai.error’ result self.fn(*self.args, **self.kwargs) File “H:\chatGPTWeb\chatgpt-on-wechat\channel\chat_channel.py”, line 168, in _handle reply self._generate_reply(context) File “H:\chatGPTWeb\chatgpt-on-wec…

【网络安全】—计算机网络基础

文章目录 网络必备基础物理层数据链路层与交换机网络模型OSI/TCP对等传输虚拟局域网VLAN静态路由与配置网络地址转换NAT访问控制列表ACLIP协议与IP地址分类子网掩码网关子网划分总结 计算机网络是指将地理位置不同的、功能独立的多台计算机通过通信线路连接起来&#xff0c;以功…

linux查看日志的几种方式

一、cat命令 1.使用cat命令&#xff1a;通过cat命令可以直接打开并显示文本文件内容&#xff0c;包括日志文件。例如&#xff0c;要查看名为logfile.txt的日志文件&#xff0c;可以运行以下命令&#xff1a;cat logfile.txt 常用命令&#xff1a;cat -n filename | grep “关键…

echarts地图map鼠标移入区域颜色(渐变)

鼠标移入透明 itemStyle下 emphasis属性 itemStyle: {// # 在未设置dataRange或 visualMap时设置有效normal: {// borderColor: rgba(12, 222, 255, 1),// borderWidth: 0.8,areaColor: {type: linear-gradient,x: 0,y: 300,x2: 0,y2: 0,colorStops: [{offset: 0,color: rg…