Vue2从基础到实战(指令篇)

案例:动态切换图片

<!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><style>.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}</style>
</head>
<body><div id="app"><div class="box"><button v-show="index > 0" @click="index--">上一页</button><div><img :src="list[index]" alt=""></div><button v-show="index < 2" @click="index++">下一页</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {index: 0,list: ['./imgs/1.png','./imgs/2.png','./imgs/3.png']}})</script>
</body>
</html>

实现效果:

 

v-for

v-for 指令需要使用 (item, index) in arr 形式的特殊语法,其中:

  • item 是数组中的每一项

  • index 是每一项的索引,不需要可以省略

  • arr 是被遍历的数组

<!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><style>.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}</style>
</head>
<body><div id="app"><div class="box"><h3>sx水果店</h3><ul><li v-for="item in list">{{ item }}</li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: ['西瓜','苹果','鸭梨']}})</script>
</body>
</html>

v-for中的key

语法: key="唯一值"

作用:给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用

为什么加key:Vue 的默认行为会尝试原地修改元素(就地复用

<ul><li v-for="(item, index) in booksList" :key="item.id"><span>{{ item.name }}</span><span>{{ item.author }}</span><button @click="del(item.id)">删除</button></li>
</ul>

 v-model

双向绑定指令:

  1. 数据改变后,呈现的页面结果会更新

  2. 页面结果更新后,数据也会随之而变

作用:表单元素(input、radio、select)使用,双向绑定数据,可以快速 获取设置 表单元素内容

语法:v-model="变量"

<!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><style>.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}</style>
</head>
<body><div id="app"><div class="box">账户: <input type="text" v-model="username"> <br><br>密码:<input type="password" v-model="password"> <br><br><button @click="login">登录</button><button @click="reset">重置</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',password: ''},methods: {login() {alert(`用户名: ${this.username}\n密码: ${this.password}`);},reset() {this.username = '';this.password = '';}}})</script>
</body>
</html>
  • <input type="text" v-model="username">: 使用 v-model 双向绑定输入框的值与 Vue 实例中的 username 数据。
  • <input type="password" v-model="password">: 使用 v-model 双向绑定输入框的值与 Vue 实例中的 password 数据。
  • <button @click="login">登录</button>: 绑定点击事件处理器 login 方法。
  • <button @click="reset">重置</button>: 绑定点击事件处理器 reset 方法。
  • data: 定义了组件的数据,包含 usernamepassword
  • methods: 定义了组件的方法。
    • login(): 当用户点击“登录”按钮时,会弹出一个包含用户名和密码的警告框。
    • reset(): 当用户点击“重置”按钮时,会清空用户名和密码输入框

 

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

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

相关文章

划重点!「2024观测云发布会」亮点速览

在刚刚落幕的「2024观测云发布会」上&#xff0c;CEO蒋烁淼及其团队以「ENDLESS EVOLUTION」为主题&#xff0c;向大家展示了观测云近两年的革新之旅。不仅深入回顾了观测云在产品创新、技术突破上的持续追求&#xff0c;更以远见卓识&#xff0c;描绘了一幅充满潜力与创新的未…

ChatGPT小狐狸AI付费创作系统v3.0.3+前端

小狐狸GPT付费体验系统的开发基于国外很火的ChatGPT&#xff0c;这是一种基于人工智能技术的问答系统&#xff0c;可以实现智能回答用户提出的问题。相比传统的问答系统&#xff0c;ChatGPT可以更加准确地理解用户的意图&#xff0c;提供更加精准的答案。同时&#xff0c;小狐狸…

【C语言】整数类型及其数值范围(截断+数据)

&#x1f984;个人主页:小米里的大麦-CSDN博客 &#x1f38f;所属专栏:https://blog.csdn.net/huangcancan666/category_12718530.html ⚙️操作环境:Visual Studio 2022 目录 一、介绍 二、整数类型表 1.分析 2.小结 三、截断 1.什么是截断&#xff1f; 2.为什么需要截断…

为什么要做边界值测试?

边界值测试的理解 边界值测试&#xff08;Boundary Value Testing&#xff09;是一种常用的软件测试方法&#xff0c;它侧重于测试输入值的边缘或临界条件。这些边缘条件通常包括最小值、最大值以及接近这些最小值和最大值的值。边界值测试的基本思想是&#xff0c;许多软件错…

WEB前端开发中如何实现大文件上传?

大文件上传是个非常普遍的场景&#xff0c;在面试中也会经常被问到&#xff0c;大文件上传的实现思路和流程。在日常开发中&#xff0c;无论是云存储、视频分享平台还是企业级应用&#xff0c;大文件上传都是用户与服务器之间交互的重要环节。随着现代网络应用的日益复杂化&…

贪心算法-买卖股票问题

贪心算法&#xff08;Greedy Algorithm&#xff09;是一种在每一步选择中都采取在当前状态下最好或最优&#xff08;即最有利&#xff09;的选择&#xff0c;从而希望导致结果是全局最好或最优的算法。贪心算法并不保证总是能得到全局最优解&#xff0c;但它通常能得到不错的解…

【排序算法(二)】——冒泡排序、快速排序和归并排序—>深层解析

前言&#xff1a; 接上篇&#xff0c;排序算法除了选择排序&#xff08;希尔排序&#xff09;和插入排序&#xff08;堆排序&#xff09;之外&#xff0c;还用交换排序&#xff08;冒泡排序、快速排序&#xff09;和归并排序已经非比较排序&#xff0c;本篇来深层解析这些排序算…

Java 基础 and 进阶面试知识点(超详细)

一个 Java 文件中是否可以存在多个类&#xff08;修饰类除外&#xff09;&#xff1f; 一个 Java 文件中是可以存在多个类的&#xff0c;但是一个 Java 文件中只能存在一个 public 所修饰的类&#xff0c;而且这个 Java 文件的文件名还必须和 public 所修饰类的类名保持一致&a…

轻松入门Linux—CentOS,直接拿捏 —/— <1>

一、什么是Linux Linux是一个开源的操作系统&#xff0c;目前是市面上占有率极高的服务器操作系统&#xff0c;目前其分支有很多。是一个基于 POSIX 和 UNIX 的多用户、多任务、支持多线程和多 CPU 的操作系统 Linux能运行主要的UNIX工具软件、应用程序和网络协议 Linux支持 32…

C++入门基础:C++中的循环语句

循环语句是编程语言中用来重复执行一段代码直到满足特定条件的一种控制结构。它们对于处理需要重复任务的场景非常有用&#xff0c;比如遍历数组、累加数值、重复执行某项操作直到满足条件等。 但是在使用循环语句的时候需要注意下哈&#xff0c;有时候一不小心会构成死循环或者…

centos安装kubernetes

本章程安装k8s 1.30版本为例。 1、环境配置 k8s 自1.24版本起&#xff0c;移除了dockershim了&#xff0c;1.30使用了containerd运行部署&#xff0c;containerd部署文档参考centos安装containerd-CSDN博客 k8s部署环境可参考容器运行时 | Kubernetes 1.1、修改主机名称 #…

【Django5】模型定义与使用

系列文章目录 第一章 Django使用的基础知识 第二章 setting.py文件的配置 第三章 路由的定义与使用 第四章 视图的定义与使用 第五章 二进制文件下载响应 第六章 Http请求&HttpRequest请求类 第七章 会话管理&#xff08;Cookies&Session&#xff09; 第八章 文件上传…

MacOS 使用DBeaver连接MySQL数据库 以及常见的问题

文章目录 1 DBeaver介绍2 下载安装3 连接MySQL4 DBeaver使用中的常见问题1 DBeaver驱动无法下载2 连接mysql时报错 Public Key Retrieval is not allowed3 mysql出现错误提示&#xff1a;connection refused: Communications link failure The last packet sent successfully t…

【JavaScript】详解Day.js:轻量级日期处理库的全面指南

文章目录 一、Day.js简介1. 什么是Day.js&#xff1f;2. 安装Day.js 二、Day.js的基本用法1. 创建日期对象2. 格式化日期3. 解析日期字符串4. 操作日期5. 比较日期 三、Day.js的高级功能1. 插件机制2. 国际化支持 四、实际应用案例1. 事件倒计时2. 日历应用 在JavaScript开发中…

界面控件Telerik UI for WPF 2024 Q2亮点 - 全新的AIPrompt组件

Telerik UI for WPF拥有超过100个控件来创建美观、高性能的桌面应用程序&#xff0c;同时还能快速构建企业级办公WPF应用程序。UI for WPF支持MVVM、触摸等&#xff0c;创建的应用程序可靠且结构良好&#xff0c;非常容易维护&#xff0c;其直观的API将无缝地集成Visual Studio…

vite tsx项目的element plus集成 - 按需引入踩坑

前面我们进行了开源组件的自研&#xff0c;很多组件可直接用现成的开源组件库&#xff0c;并不需要自己重复造轮子&#xff0c;为此我们讲如何在当前vite vitepress tsx技术整合的项目中实现element plus组件的按需引入&#xff0c;同时解决遇到的一些坑。 安装Element Plus…

Codeforces Round #956 (Div. 2) and ByteRace 2024

A.思维&#xff1a;https://codeforces.com/contest/1983/problem/A AC代码&#xff1a; #include<bits/stdc.h> using namespace std; int t; int n; int main(){cin>>t;while(t--){cin>>n;for(int i1;i<n;i) cout<<i<<" ";cout…

《浅谈如何培养树立正确的人工智能伦理观念》

目录 摘要&#xff1a; 一、引言 二、《机械公敌》的情节与主题概述 三、人工智能伦理与法律问题分析 1.伦理挑战 2.法律问题 四、培养正确的人工智能伦理观念的重要性 五、培养正确的人工智能伦理观念的途径与方法 1.加强教育与宣传 2.制定明确的伦理准则和规范 3.…

Doris全方位教程+应用实例

Impala性能稍领先于presto,但是presto在数据源支持上非常丰富&#xff0c;包括hive、图数据库、传统关系型数据库、Redis等 缺点&#xff1a;这两种对hbase支持的都不好&#xff0c;presto 不支持&#xff0c;但是对hdfs、hive兼容性很好&#xff0c;其实这也是顺理成章的&…

Swift学习入门,新手小白看过来

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起进步。 &#x1f60a; 座右铭&#xff1a;不…