【Vue2+3入门到实战】（4）Vue基础之指令修饰符 、v-bind对样式增强的操作、v-model应用于其他表单元素 详细示例

news2025/2/8 11:13:54

目录

    • 一、今日学习目标
      • 1.指令补充
    • 二、指令修饰符
      • 1.什么是指令修饰符？
      • 2.按键修饰符
      • 3.v-model修饰符
      • 4.事件修饰符
    • 三、v-bind对样式控制的增强-操作class
      • 1.语法：
      • 2.对象语法
      • 3.数组语法
      • 4.代码练习
    • 四、京东秒杀-tab栏切换导航高亮
      • 1.需求：
      • 2.准备代码:
      • 3.思路：
    • 五、v-bind对有样式控制的增强-操作style
      • 1.语法
      • 2.代码练习
      • 3.进度条案例
    • 六、v-model在其他表单元素的使用
      • 1.讲解内容：
      • 2.代码准备

在这里插入图片描述

一、今日学习目标

1.指令补充

  1. 指令修饰符
  2. v-bind对样式增强的操作
  3. v-model应用于其他表单元素

二、指令修饰符

1.什么是指令修饰符？

​ 所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码

2.按键修饰符

  • @keyup.enter —>当点击enter键的时候才触发，键盘回车监听

代码演示：

  <div id="app">
    <h3>@keyup.enter  →  监听键盘回车事件</h3>
    <input v-model="username" type="text">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: ''
      },
      methods: {
        
      }
    })
  </script>

3.v-model修饰符

  • v-model.trim —>去除首位空格
  • v-model.number —>转数字

4.事件修饰符

  • @事件名.stop —> 阻止冒泡
  • @事件名.prevent —>阻止默认行为
  • @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为
 <style>
    .father {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 20px;
    }
    .son {
      width: 100px;
      height: 100px;
      background-color: skyblue;
    }
  </style>

 <div id="app">
    <h3>v-model修饰符 .trim .number</h3>
    姓名：<input v-model="username" type="text"><br>
    年纪：<input v-model="age" type="text"><br>

    
    <h3>@事件名.stop     →  阻止冒泡</h3>
    <div @click="fatherFn" class="father">
      <div @click="sonFn" class="son">儿子</div>
    </div>

    <h3>@事件名.prevent  →  阻止默认行为</h3>
    <a @click href="http://www.baidu.com">阻止默认行为</a>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        username: '',
        age: '',
      },
      methods: {
        fatherFn () {
          alert('老父亲被点击了')
        },
        sonFn (e) {
          // e.stopPropagation()
          alert('儿子被点击了')
        }
      }
    })
  </script>

三、v-bind对样式控制的增强-操作class

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制 。

1.语法：

<div> :class = "对象/数组">这是一个div</div>

2.对象语法

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

​ 适用场景：一个类名，来回切换

3.数组语法

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

使用场景:批量添加或删除类

4.代码练习

 <style>
    .box {
      width: 200px;
      height: 200px;
      border: 3px solid #000;
      font-size: 30px;
      margin-top: 10px;
    }
    .pink {
      background-color: pink;
    }
    .big {
      width: 300px;
      height: 300px;
    }
  </style>


<div id="app">
    <!--绑定对象-->
    <div class="box">程序员</div>
    <!--绑定数组-->
    <div class="box">程序员</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

四、京东秒杀-tab栏切换导航高亮

1.需求：

​ 当我们点击哪个tab页签时，哪个tab页签就高亮

2.准备代码:

 <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      display: flex;
      border-bottom: 2px solid #e01222;
      padding: 0 10px;
    }
    li {
      width: 100px;
      height: 50px;
      line-height: 50px;
      list-style: none;
      text-align: center;
    }
    li a {
      display: block;
      text-decoration: none;
      font-weight: bold;
      color: #333333;
    }
    li a.active {
      background-color: #e01222;
      color: #fff;
    }

  </style>

<div id="app">
    <ul>
      <li><a class="active" href="#">京东秒杀</a></li>
      <li><a href="#">每日特价</a></li>
      <li><a href="#">品类秒杀</a></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: [
          { id: 1, name: '京东秒杀' },
          { id: 2, name: '每日特价' },
          { id: 3, name: '品类秒杀' }
        ]
      }
    })
  </script>

3.思路：

1.基于数据，动态渲染tab（v-for）

2.准备一个下标 记录高亮的是哪一个 tab

3.基于下标动态切换class的类名

在这里插入图片描述

五、v-bind对有样式控制的增强-操作style

1.语法

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

2.代码练习

<style>
    .box {
      width: 200px;
      height: 200px;
      background-color: rgb(187, 150, 156);
    }
 </style>
 <div id="app">
    <div class="box"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

3.进度条案例

 <style>
    .progress {
      height: 25px;
      width: 400px;
      border-radius: 15px;
      background-color: #272425;
      border: 3px solid #272425;
      box-sizing: border-box;
      margin-bottom: 30px;
    }
    .inner {
      width: 50%;
      height: 20px;
      border-radius: 10px;
      text-align: right;
      position: relative;
      background-color: #409eff;
      background-size: 20px 20px;
      box-sizing: border-box;
      transition: all 1s;
    }
    .inner span {
      position: absolute;
      right: -20px;
      bottom: -25px;
    }
  </style>

<div id="app">
    <div class="progress">
      <div class="inner">
        <span>50%</span>
      </div>
    </div>
    <button>设置25%</button>
    <button>设置50%</button>
    <button>设置75%</button>
    <button>设置100%</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

在这里插入图片描述

六、v-model在其他表单元素的使用

1.讲解内容：

常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

输入框  input:text   ——> value
文本域  textarea	 ——> value
复选框  input:checkbox  ——> checked
单选框  input:radio   ——> checked
下拉菜单 select    ——> value
...

2.代码准备

 <style>
    textarea {
      display: block;
      width: 240px;
      height: 100px;
      margin: 10px 0;
    }
  </style>
 <div id="app">
    <h3>小黑学习网</h3>
    姓名：
      <input type="text"> 
      <br><br>
    是否单身：
      <input type="checkbox"> 
      <br><br>
    <!-- 
      前置理解：
        1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
        2. value: 给单选框加上 value 属性，用于提交给后台的数据
      结合 Vue 使用 → v-model
    -->
    性别: 
      <input type="radio">男
      <input type="radio">女
      <br><br>
    <!-- 
      前置理解：
        1. option 需要设置 value 值，提交给后台
        2. select 的 value 值，关联了选中的 option 的 value 值
      结合 Vue 使用 → v-model
    -->
    所在城市:
      <select>
        <option>北京</option>
        <option>上海</option>
        <option>成都</option>
        <option>南京</option>
      </select>
      <br><br>
    自我描述：
      <textarea></textarea> 
    <button>立即注册</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

在这里插入图片描述

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

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

相关文章

Java 快速入门

Java 快速入门

简介 跨平台性&#xff1a;Java 最大的优势之一就是跨平台性&#xff0c;即一份 Java 程序可以在多平台上运行&#xff0c;而无需重写。 简单易学&#xff1a;Java 的语法和面向对象的开发方式非常简单易学。 安全性&#xff1a;Java 对于安全性的处理非常慎重&#xff0c;对…
阅读更多...
Power BI 学习

Power BI 学习

补充 二维表: 二维表就是由行列组成的&#xff0c;知道行号列号就可以确定一个表中的数据&#xff0c;这是二维表的特点。在关系数据库中,存放在数据库中的数据的逻辑结构以二维表为主.在二维表中惟一标识元组的最小属性值称为该表的键或码。二维表中可能有若干个健&#xff…
阅读更多...
分别使用OVP-UVP和OFP-UFP算法以及AFD检测算法实现反孤岛检测simulink建模与仿真

分别使用OVP-UVP和OFP-UFP算法以及AFD检测算法实现反孤岛检测simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 OVP-UVP算法 4.2 OFP-UFP算法 4.3 AFD检测算法 5.完整工程文件 1.课题概述 分别使用OVP-UVP和OFP-UFP算法以及AFD检测算法实现反孤岛检测simulink建模与仿真。 2.系统仿真结果 3.核心程序与模型…
阅读更多...
Java基础回顾——JDBC

Java基础回顾——JDBC

文章目录 介绍使用JDBC事务JDBC BatchJDBC连接池 介绍 Java为关系数据库定义了一套标准的访问接口&#xff1a;JDBC&#xff08;Java Database Connectivity&#xff09; JDBC是Java程序访问数据库的标准接口 好处&#xff1a; 各数据库厂商使用相同的接口&#xff0c;Java…
阅读更多...
基于SSM+Vue的教材信息管理系统（Java毕业设计）

基于SSM+Vue的教材信息管理系统（Java毕业设计）

点击咨询源码 大家好&#xff0c;我是DeBug&#xff0c;很高兴你能来阅读&#xff01;作为一名热爱编程的程序员&#xff0c;我希望通过这些教学笔记与大家分享我的编程经验和知识。在这里&#xff0c;我将会结合实际项目经验&#xff0c;分享编程技巧、最佳实践以及解决问题的…
阅读更多...
Python遥感影像深度学习指南(2)-在 PyTorch 中创建自定义数据集和加载器

Python遥感影像深度学习指南(2)-在 PyTorch 中创建自定义数据集和加载器

在上一篇 文章中，我们Fast.ai 在卫星图像中检测云轮廓，检测物体轮廓被称为语义分割。虽然我们用几行代码就能达到 96% 的准确率，但该模型无法考虑数据集中提供的所有输入通道（红、绿、蓝和近红外）。问题在于，深度学习框架（如 Keras、Fast.ai 甚至 PyTorch）中的大多数语…
阅读更多...
OAuth2授权码模式---详解

OAuth2授权码模式---详解

OAuth2简介 是一个业界标准的授权协议&#xff08;authorization protocol&#xff09;&#xff0c;这里的授权是以委派代理&#xff08;delegation&#xff09;的方式。可以这样理解&#xff0c;OAuth 2.0提供一种协议交互框架&#xff0c;让某个应用能够以安全地方式获取到用…
阅读更多...
利用html2Canvas将表格下载为html

利用html2Canvas将表格下载为html

给到我的需求是点击按钮时请求后端接口&#xff0c;根据后端返回的数据&#xff0c;生成表格,并将表格的内容直接下载为html,如下图。 平常做的下载都是后端返回二进制流&#xff0c;这次前端做下载那就必须把页面先画出来&#xff0c;因为下载下来的表格在页面上是不显示的&a…
阅读更多...
知网查重链接(知网个人版)

知网查重链接(知网个人版)

该系统支持毕业设计&#xff08;本科专科&#xff09;、学位论文&#xff08;研究生&#xff09;、课程作业&#xff08;本科专科&#xff09;、课程作业&#xff08;研究生&#xff09;、职称评审、学术出版、学术研究、基础教育、政务公文、党团材料、新闻稿件、总结报告等各…
阅读更多...
关于Python里xlwings库对Excel表格的操作（十九）

关于Python里xlwings库对Excel表格的操作（十九）

这篇小笔记主要记录如何【取消合并单元格】。 前面的小笔记已整理成目录&#xff0c;可点链接去目录寻找所需更方便。 【目录部分内容如下】【点击此处可进入目录】 &#xff08;1&#xff09;如何安装导入xlwings库&#xff1b; &#xff08;2&#xff09;如何在Wps下使用xlwi…
阅读更多...
【Spring实战】05 CommandLineRunner

【Spring实战】05 CommandLineRunner

文章目录 1. 简介2. 用法1&#xff09;单个 CommandLineRunner2&#xff09;多个 CommandLineRunner 3. 优点4. 缺点总结 CommandLineRunner 是 Spring Boot 提供的一个接口&#xff0c;用于在 Spring Boot 应用程序启动后执行一些任务。通过实现 CommandLineRunner 接口&#…
阅读更多...
IntelliJ IDEA [设置] 隐藏 .idea 等 .XXX 文件夹

IntelliJ IDEA [设置] 隐藏 .idea 等 .XXX 文件夹

文章目录 1. 问题描述2. 解决办法3. 最后效果总结 我们使用 IntelliJ IDEA 导入项目的时候&#xff0c;经常会看到一些 .XXX 的文件夹&#xff08;例如&#xff1a;.idea&#xff0c;.mvn&#xff0c;.gradle 等&#xff09;。其实这些文件夹和我们代码编写是无关的&#xff0c…
阅读更多...
5G NR无线蜂窝系统的信道估计器设计

5G NR无线蜂窝系统的信道估计器设计

文章目录 DMRS简介DMRS类型DMRS频域密度 信道估计实验仿真实验参数实验实验结论 DMRS简介 DMRS类型 类型A&#xff1a;DMRS位于时隙的第二个或第三个OFDM符号&#xff0c;由14个OFDM符号组成&#xff0c;当数据占据大部分时隙时使用A型映射。 类型B&#xff1a;用在URLLC中&a…
阅读更多...
JSON在Java中的使用

JSON在Java中的使用

目录 第一章、快速了解JSON1.1&#xff09;JSON是什么1.2&#xff09;json的语法格式①键值对、字符串、数字、布尔值、数组、对象②嵌套的格式 1.3&#xff09;为什么使用JSON 第二章、发送和接收JSON格式数据2.1&#xff09;postman发送JSON格式数据2.2&#xff09;Java后端接…
阅读更多...
开源verilog模拟 iverilog verilator +gtkwave仿真及一点区别

开源verilog模拟 iverilog verilator +gtkwave仿真及一点区别

开源的 iverilog verilator 和商业软件动不动几G几十G相比&#xff0c;体积小的几乎可以忽略不计。 两个都比较好用&#xff0c;各有优势。 iverilog兼容性好。 verilator速度快。 配上gtkwave 看波形&#xff0c;仿真工具基本就齐了。 说下基本用法 计数器 counter.v module…
阅读更多...
根文件系统制作-移植

根文件系统制作-移植

【1】概念 根文件系统&#xff1a;系统运行所必须依赖的一些文件 &#xff08;比如脚本、库、配置文件...&#xff09;&#xff0c;本质就是目录和文件。根文件系统镜像&#xff1a;将根文件系统按照某种格式进行打包压缩后生成的单个文件 rootfs-----> ramdisk.img 文件系…
阅读更多...
多行文本(多行字符串)中，如果每行文本前都有空格，各行文本前空格数最小为n，则删除每行文本前的n个空格。textwrap.dedent(多行字符串)

多行文本(多行字符串)中，如果每行文本前都有空格，各行文本前空格数最小为n，则删除每行文本前的n个空格。textwrap.dedent(多行字符串)

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 多行文本(多行字符串)中&#xff0c; 如果每行文本前都有空格&#xff0c; 各行文本前空格数最小为n&#xff0c; 则删除每行文本前的n个空格。 textwrap.dedent(多行字符串) 请问以下代…
阅读更多...
汽车项目管理

汽车项目管理

项目节点&#xff1a; MR (Management Review)——管理层评审 KO (Kick Off)——项目正式启动 SI (Strategy Intent)——战略意图 SC (Strategy Confirmation)——战略确认 PA (Program Approval)——项目批准 PR (Product Readiness)——产品就绪 VP (Verification Prototype)…
阅读更多...
在Vue3中使用vue-qrcode库实现二维码生成

在Vue3中使用vue-qrcode库实现二维码生成

本文主要介绍在Vue3中使用qrcode库实现二维码生成的方法。 目录 一、基础用法实现vue-qrcode库的参数介绍 在Vue3中实现二维码生成需要使用第三方库来处理生成二维码的逻辑。常用的库有 qrcode和 vue-qrcode。 一、基础用法实现 在Vue3中使用vue-qrcode库实现二维码生成的方…
阅读更多...
人大金仓助力某市公积金核心业务系统国产化升级

人大金仓助力某市公积金核心业务系统国产化升级

近日&#xff0c;在金仓数据库的支撑下&#xff0c;某市住房公积金管理中心多个核心业务系统顺利上线&#xff0c;服务该市330余万常住人口&#xff0c;进一步“让信息多跑路&#xff0c;群众少跑路”&#xff0c;提升公积金服务效率。 “ 适应信息技术应用创新趋势的重点示范项…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023