首页 > 其他分享 >vue的属性绑定/条件渲染/列表渲染/key管理状态/事件处理/事件传参/事件修饰符等知识总结

vue的属性绑定/条件渲染/列表渲染/key管理状态/事件处理/事件传参/事件修饰符等知识总结

时间:2024-07-24 13:41:31浏览次数:18  
标签:事件处理 修饰符 渲染 绑定 事件 key 条件 属性

1.属性绑定
属性绑定使用v-bind命令执行,可忽略不写,以下图片为属性绑定知识内容

效果图

2.条件渲染
条件渲染使用v-if命令执行
** v-if VS v-show 区别**
v-if是"真实的"按条件渲染,因为它确保了在切换时,条件区块内的事件监听器和子组件都会被销毁与重建(将条件移除和添加 如果首次条件为false,它不会添加,无渲染)
v-if也是惰性的:如果在初次渲染时条件值为false,则不会做任何事。条件区块只有当条件首次变为true时才会被渲染

v-show无论初始条件如何,都会渲染

3.列表渲染
列表渲染使用v-for命令执行,它将遍历数组。


效果图

4.key管理状态
标签正常没有key属性 v-bind添加一个特殊属性 添加唯一索引后方便变换位置

5.事件处理
内联事件处理器(不常用)

方法事件处理器

6.事件传参

console.log(e);//打印event对象
console.log(e.target); //控制台显示button标签以及内容
console.log(e.target.innerHTML ="Add" + this.count);//修改button内容

7.事件修饰符


https://cn.vuejs.org/guide/introduction.html 官方文档

标签:事件处理,修饰符,渲染,绑定,事件,key,条件,属性
From: https://www.cnblogs.com/zhishizongjie/p/18320686

相关文章

  • 事件处理模式
    事件处理模式reactor模式reactor是一种事件处理模式,出现要解决的问题是要将原本IO管理转变为更关心事件管理,每个事件发生的时候调用回调函数进行处理。构成register注册事件callback回调函数包括io,event,callback,rbuffer,wbuffer需要注意的是event和call_back对应......
  • C#中栈和堆以及修饰符
    关于堆中字符串的存放strings1="123"strings2="123"strings1="456"此时s1输出为456而s2仍然为123因为在使用Stringstr="字符串"的方式来创建String变量的时候,那么String的值便会存储在String常量池中,在我们以这种方式创建String变量时,编译器会先判断你这个内容......
  • openlayers在地图上使用Overlay渲染图标无法操作地图问题
    ol对于在地图上渲染图标,并且图标可以随着地图的缩放层级自适应,跟随地图移动,ol是提供了一个很好用的方法的---overlay代码如下://定义标注对象letlable_div=document.createElement('div')lable_div.className=[s.labelDiv]letoffsetY=0let_classname=''_classn......
  • XR实时云渲染:助力虚拟仿真实训教学呈现
    近年来以5G、云计算、大数据、物联网、人工智能、虚拟现实/增强现实为代表的新兴技术迅速发展加速创新,日益融入经济社会发展各领域全过程,世界主要国家和地区纷纷加快数字化转型战略布局。虚拟仿真系统是一种能模拟现实世界或虚拟世界的计算机程序。在现实环境中,它模拟了各种行为......
  • 文字流渲染
    HTML代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>文字流渲染</t......
  • vue3 - 最新详细实现 “日历课程表“ 上课时间表功能组件,教务系统专用老师排课表插件
    效果图在vue3、nuxt3项目开发中,详解实现学生每周“动态课程表(日历表展现)”功能实现,对学期的每周课程进行排课和准备工作,可自由切换本月的每周上课表情况、也可通过日期范围选择器进行筛选指定周的教学排班表、相同的课成可以合并(可不开启),课表数据结构支持调用后端服......
  • 8个软件和渲染农场:让3D建模和渲染变得简单
    3D建模和渲染已成为艺术与技术的交汇点,尽管这一领域充满挑战,但总有一些工具和资源能让用户使用变得不那么艰难。今天,我们将探讨“8个软件和渲染农场:让3D建模和渲染变得简单”,这些工具不仅简化了建模和渲染的过程,还通过渲染农场技术,使得即使是资源有限的个人也能享受到专业的渲染效......
  • 2024-07-18 code标签渲染时会多出空格是怎么回事?
    问题就是我给code标签传递一段源代码,该代码明明没有空格,但实际渲染却多了一串空格?如下图所示: 原因:code标签包裹的内容会原原本本的渲染出来,包括空格。我查看了我的代码: 我是这么写的:<code>{{sourceCode}}</code>{{sourceCode}}前面有空格,code标签直接把它们......
  • 云渲染服务:初创企业的成本效益与效率提升
    视觉营销对于吸引潜在客户至关重要,而云渲染作为一种革命性工具,为创意产业提供了强大的计算能力和灵活性,帮助企业在竞争激烈的市场中脱颖而出。一、什么是云渲染?云渲染是指客户利用远程计算资源,将图形传输到云服务器,而不是使用传统计算机的过程。云渲染服务将渲染工作负载划分为......
  • vue数据渲染页面数据展示出现闪烁问题
    在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如{{value.name}}在加载的时候会看到{{value.name}}原因:由于JavaScript去操作DOM,都会等待DOM加载完成(DOMready)。对于vuejs、angularjs这些会在DOMready完会才回去解析htmlviewTemplate,所以对于Chrome这类快速的浏览......