VUE学习笔记 2

news2024/11/25 2:32:37

条件渲染

v-if : 若不频繁切换,会删除DOM节点,再重复添加;  template只能配合v-if

v-show: 适用于频繁切换,动态变换但不删除DOM节点

列表渲染

方式: v-for="p in person"  :key="yyy"

遍历数组 

<body>
    <div class="demo">
        <ul>

           (1) <li v-for="item in items"> {{item}} </li>


           (2) <li v-for="(item, index) in items"> {{index}} --- {{item}} </li>

        </ul>
    </div>
 
    <script>
        var app = new Vue({
            el: '.demo',
            data: {
                items: ['小李', '小黄', '小张']
            }
        })
    </script>
</body>

遍历信息

遍历字符串

遍历指定次数

key作用与(原理  - ->待补充)

给列表项添加唯一的标识(比如id),便于vue进行正确排序

key值只能是字符串或数字型,且必须具有唯一性

推荐用id,不用index

列表过滤

return hero.name.indexOf(val) >= 0

indexOf返回在字符串中的下标

指令

v-html="表达式"           动态解析标签

v-show="表达式"          控制元素显示,隐藏  (本质上是切换css的display:none)

v-if="表达式"                条件渲染,创建移除元素 (本质上通过条件判断)

v-on两种方式:

(1)v-on:  事件名 = "内联语句"        作用:注册事件(简写将 v-on: 替换成 @)

(2)v-on:  事件名 = "methods中的函数名"

        

@click="fn(传参)"

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

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

相关文章

详讲C#中如何存储当前项目的设置-超级简单省事

我们在编写软件的时候总有一些配置数据需要保存&#xff0c;比如用户选择的偏好设置&#xff0c;又如软件所用到的数据库文件等。我们有很多中方式都可以保存&#xff0c;比如直接保存在某个文本文件&#xff0c;或者ini文件中&#xff0c;其实最简单的办法是保存在项目的资源文…

File的常见成员方法(创建,删除)

一.File的常见成员方法&#xff08;创建&#xff0c;删除&#xff09;&#xff1a; 二.方法的代码实现&#xff1a; 1.createNewFile方法->创建一个新的空的文件&#xff1a; 如上图直接调用createNewFile方法会报错&#xff0c;处理方案如下&#xff1a; 本例选择第一个&a…

Kotlin OpenCV 图像图像51图片轮廓获取

Kotlin OpenCV 图像图像51图片轮廓获取 在OpenCV库中&#xff0c;Imgproc.adaptiveThreshold、Imgproc.findContours 和 Imgproc.boundingRect 这三个方法在图像处理和分析中非常有用。以下是它们的详细作用&#xff1a; Imgproc.adaptiveThreshold解释作用该方法用于将灰度图…

工业排污检测算法的算法样本及工业排污检测的源码展示

工业排污检测算法是一种结合了先进人工智能、图像识别、声音识别、数据分析等技术的解决方案&#xff0c;专门用于实时监测和评估工业排放的污染物。这种算法在环境保护、合规管理、数据支持等方面具有显著的优势&#xff0c;并且可以广泛应用于各种工业场景。 主要作用 1、实…

宝塔面板本地搭建Typecho博客结合内网穿透实现远程访问本地站点

文章目录 前言1. 安装环境2. 下载Typecho3. 创建站点4. 访问Typecho5. 安装cpolar6. 远程访问Typecho7. 固定远程访问地址8. 配置typecho 前言 本文主要介绍如何通过Linux centOS8宝塔面板工具&#xff0c;本地搭建一个Typecho个人博客网站。并结合cpolar内网穿透工具配置公网…

关于Arrays.asList返回List无法新增和删除?

这个是在写项目的时候发现的&#xff0c;然后就分析了一下源码&#xff0c;得其内部原理 复现代码示例&#xff1a; public class ArraysAsList {public static void main(String[] args) {Integer[] array {1, 2, 3, 4, 5};List<Integer> list Arrays.asList(array);…

html+css+js网页制作 电商小米商城7个页面

htmlcssjs网页制作 电商小米商城7个页面 ui还原度百分之99 网页作品代码简单&#xff0c;可使用任意HTML编辑软件&#xff08;如&#xff1a;Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作&#xff09;。 …

uniapp/uniapp x总结

uni-app组成和跨端原理 上图所诉 App的渲染引擎&#xff1a;同时提供了2套渲染引擎&#xff0c;.vue页面文件由webview渲染&#xff0c;原理与小程序相同&#xff1b;.nvue页面文件由原生渲染&#xff0c;原理与react native相同。开发者可以根据需要自主选择渲染引擎。 uniapp…

STM32f407 网络接收 fpga 的 bin 文件并更新到 fpga series7(2)

STM32f407 网络接收 fpga 的 bin 文件并更新到 fpga series7(2) 简介 实验 2&#xff1a;在单片机搭建好 tcp 服务器后&#xff0c;编写传送文件的上位机。 整体实现 - 利用qt的tcpsocket简单封装 - 每次发送512字节&#xff0c;这样小的tcp包就不会自动分包。保证每一个51…

多商户商品下单限购问题修复

问题: 当商品设置限购为 1 时,够买数量未超过限购,但是还是提示超出限购数量 修复方法: 修改代码路径: app\common\repositories\store\order\StoreOrderCreateRepository.php 修改代码一: i s p a y s a r r a y u n i q u e ( a r r a y c o l u m n ( is_pays array_un…

阿里一款非常不错的多级缓存框架如何使用?

目录 前言 1. jetcache简介 2. jetcache使用 2. jetcache使用 3. 测试 3.1 方式一测试 3.2 方式二测试 3.3 方式三测试 4.缺点优点 5. 常见报错 前言 大家好&#xff0c;我是月夜枫~~ 在很多大数据、高并发的业务中&#xff0c;像MySql等传统的关系型数据库已经不能适用…

C++ 设计模式(3. 抽象工厂模式)

抽象工厂模式也是一种创建型设计模式&#xff0c;提供了一个创建一系列相关或相互依赖对象的接口&#xff0c;而无需指定它们具体的类【引用自大话设计模式第15章】基本结构 抽象工厂模式包含多个抽象产品接口&#xff0c;多个具体产品类&#xff0c;一个抽象工厂接口和多个具体…

BMC下使用KVM远程启动java被阻止解决方案

Java程序被阻止 进笔记本控制面板-Java里 安全里把BMC IP地址添加进去 -------------------------------------------- “如有侵权&#xff0c;联系删除”

【2024版】最新JDK下载和安装=保姆级教程,Java环境配置和使用指南,收藏这一篇就够了

大纲 JDK介绍 JDK下载 在线下载 离线下载 JDK安装 验证安装 JDK介绍 JDK&#xff08;Java Development Kit&#xff09;是用于开发Java应用程序的软件开发工具包。它包括&#xff1a;Java虚拟机&#xff08;JVM&#xff09;、Java类库以及其他一些用于开发Java应用程序的工具…

uniapp 获取定位权限及问题解决

目录 步骤一&#xff1a;在manifest.json中配置步骤二&#xff1a;引用文件可多页面复用的处理逻辑代码注意&#xff1a;问题处理&#xff08;1&#xff09;报错信息1&#xff1a;getLocation:fail the api need to be declared in the requiredPrivateInfos fie&#xff08;2&…

本地Docker部署Navidrome音乐服务器与远程访问听歌详细教程

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

VueSeamlessScroll 无缝滚动点击事件不生效(需要给复制Dom加样式)

VueSeamlessScroll 无缝滚动点击事件不生效&#xff08;需要给复制Dom加样式&#xff09; 实现效果遇到问题具体实现扩展 实现效果 VueSeamlessScroll 列表无缝滚动&#xff0c;且可以选择某一项进行选中改变背景&#xff0c;并且将选中的数据传到其他接口中 遇到问题 问题…

AgentMD:通过大规模临床工具学习提升语言代理的风险预测能力

人工智能咨询培训老师叶梓 转载标明出处 临床计算器在医疗保健中扮演着至关重要的角色&#xff0c;它们通过提供准确的基于证据的预测来辅助临床医生进行诊断和预后评估。然而&#xff0c;由于可用性挑战、传播不畅和功能受限&#xff0c;这些工具的广泛应用常常受限。为了克服…

如何备份电脑所有数据?有哪些方法值得参考借鉴?

备份电脑所有数据是防护数据丢失和泄密的重要一项措施&#xff0c;备份数据也有不同的方式和工具&#xff0c;正确的工具能帮你省时省力&#xff0c;下面盘点了几个方法&#xff0c;来看哪一种最适合你。 一、使用专业备份软件 第三方服务器文件自动备份软件&#xff1a;如安企…

AI恶搞《黑神话:悟空》爆火!

黑神话简直太火了&#xff0c;各个热搜榜都有它的身影。 单 Steam 上的销量榜就是榜首&#xff0c;同时在线人数突破 200W。 估计周末在线人数更多&#xff0c;能不能破最高同时在线人数记录&#xff0c;拭目以待。 最近有不少人用清影 AI 生成鬼畜视频&#xff0c;我也用《黑…