探索 Vue.js 的动态样式与交互:一个有趣的样式调整应用

修改日期备注
2025.1.3初版

一、前言

今天和大家分享在 Vue.js 学习过程中开发的超酷的小应用。这个应用可以让我们通过一些简单的交互元素,如复选框、下拉菜单和输入框,来动态地改变页面上元素的样式哦 让我们一起深入了解一下这个项目的实现过程,以及 Vue.js 在其中展现出的强大功能吧。

二、项目概览

我们先来看一下这个项目的整体结构,它由一个 HTML 文件和一个 JavaScript 文件组成,还搭配了一个简单的 CSS 文件来美化页面。

三、HTML 部分

以下是 HTML 文件的代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="./style.css" /><script src="https://unpkg.com/vue@latest"></script></head><body><div id="app"><label> <input type="checkbox" v-model="isPurple"/> Purple </label><select v-model="textColor"><option value="">White</option><option value="text-black">Black</option><option value="text-orange">Orange</option></select><label>Circle Size<input type="number" v-model="size"/></label><label>Circle Rotate<input type="number" v-model="angle"/></label><div class="circle" :class="[circleClass, textColor]" :style="[circleSize, circleRotate]">Hi!</div></div><script src="./main.js"></script></body>
</html>

在这个 HTML 文件中,有几个关键部分:

1. 输入元素

  • 我们有一个复选框:

    <label> <input type="checkbox" v-model="isPurple"/> Purple </label>
    

    这里使用了 v-model="isPurple",这个 v-model 指令可太重要啦!它将复选框的选中状态和 Vue 实例中的 isPurple 属性进行了双向绑定。这意味着,当我们勾选或取消勾选这个复选框时,isPurple 的值会相应地变成 truefalse

  • 还有一个下拉菜单:

    <select v-model="textColor"><option value="">White</option><option value="text-black">Black</option><option value="text-orange">Orange</option>
    </select>
    

    这个下拉菜单通过 v-model="textColor" 与 Vue 实例中的 textColor 属性进行双向绑定。当我们选择不同的选项时,textColor 的值就会变成相应的选项值,比如 “text-black” 或 “text-orange”。

  • 以及两个输入框:

    <label>Circle Size<input type="number" v-model="size"/>
    </label>
    <label>Circle Rotate<input type="number" v-model="angle"/>
    </label>
    

    这两个输入框分别与 sizeangle 属性进行双向绑定,当我们输入数字时,这些数字会存储在对应的属性中。它们都使用了 v-model 指令,这是 Vue.js 中实现双向数据绑定的神器哦,能让用户输入直接影响到 Vue 实例的数据。

2. 样式绑定元素

<div class="circle" :class="[circleClass, textColor]" :style="[circleSize, circleRotate]">Hi!</div>

这里是最有意思的部分啦 我们有一个 div 元素,它有一个静态的类 circle,同时使用了 :class:style 来动态绑定类和样式。

  • :class="[circleClass, textColor]"

    • circleClass 是一个计算属性,它会根据 isPurple 的值添加一个 purple 类。
    • textColor 是用户从下拉菜单中选择的值,会被作为类添加到这个 div 元素上。这样,我们可以通过用户的操作来动态改变元素的类,从而改变元素的颜色哦。
  • :style="[circleSize, circleRotate]"

    • circleSizecircleRotate 是另外两个计算属性,它们会根据用户输入的 sizeangle 来改变元素的大小和旋转角度。是不是很神奇呢?

    image-20250103182000322

四、JavaScript 部分

这是 main.js 的代码:

const app = {data() {return {isPurple: false,textColor: "",size: 200,angle: 0,};},computed: {circleClass() {return {purple: this.isPurple,};},circleSize() {return {height: `${this.size || 100}px`,width: `${this.size || 100}px`,lineHeight: `${this.size || 100}px`,};},circleRotate() {return {transform: `rotate(${this.angle || 0}deg)`,};},},
};Vue.createApp(app).mount("#app");

让我们来拆解一下:

1. 数据部分(data)

data() {return {isPurple: false,textColor: "",size: 200,angle: 0,};
}

这里定义了几个初始数据属性,isPurple 用于存储复选框的状态,textColor 存储文本颜色的选项值,size 存储圆形的大小,angle 存储旋转的角度。

2. 计算属性(computed)

  • circleClass()

    circleClass() {return {purple: this.isPurple,};
    }
    

    这个计算属性会根据 isPurple 的值返回一个对象,如果 isPurpletrue,就会添加 purple 类。这样,我们就可以通过复选框的操作来改变元素的样式啦。

  • circleSize()

    circleSize() {return {height: `${this.size || 100}px`,width: `${this.size || 100}px`,lineHeight: `${this.size || 100}px`,};
    }
    

    这个计算属性会根据 size 的值生成一个对象,包含 heightwidthlineHeight 的样式。这里还有个小技巧哦,使用 || 100 是为了防止 size 为空时出现样式异常,确保元素至少有一个初始大小。

  • circleRotate()

    circleRotate() {return {transform: `rotate(${this.angle || 0}deg)`,};
    }
    

    同样,这个计算属性根据 angle 生成一个包含 transform 属性的对象,用于旋转元素。这里也使用了 || 0 来避免 angle 为空时的问题。

五、CSS 部分

我们还有一个 style.css 文件,来看看它的代码:

.circle {background-color: purple;border-radius: 50%;display: flex;justify-content: center;align-items: center;transition: all 0.5s;
}
.purple {background-color: purple;
}
.text-black {color: black;
}
.text-orange {color: orange;
}
  • .circle 类给我们的元素一个圆形的形状(通过 border-radius: 50%),还设置了背景色、布局和过渡效果。
  • .purple 类在元素添加了 purple 类时会生效,改变背景颜色。
  • .text-black.text-orange 类会根据用户选择的文本颜色改变元素的文本颜色。
  • image-20250103181937887

六、总结

通过这个项目,我们学到了好多 Vue.js 的重要知识呢 以下是一些值得注意的要点:

1. 双向数据绑定(v-model)

  • v-model 让我们可以轻松地将用户输入和 Vue 实例中的数据关联起来,让数据在用户操作和 Vue 实例之间自由流动,大大简化了数据更新的流程。无论是复选框、下拉菜单还是输入框,使用 v-model 都让我们的开发变得轻松愉快。

2. 计算属性(computed)

  • 计算属性真是个好帮手!它可以根据数据的变化自动计算出新的值,让我们能动态地生成类和样式对象。比如 circleClass 根据 isPurple 决定是否添加 purple 类,circleSizecircleRotate 根据用户输入生成样式,让我们的元素可以实时更新样式。

3. 动态样式绑定(:class 和 :style)

  • 通过 :class:style,我们可以根据计算属性和用户选择动态地添加类和样式,为元素赋予了更多的交互性和动态性。这让我们的页面变得更加生动,而且代码也更简洁明了哦。

七、后续改进和扩展

当然啦,这个小应用还有很多可以改进和扩展的地方呢 我们可以:

  • 增加更多的样式选项,比如边框、阴影等,让用户可以更自由地定制元素的外观。
  • 可以添加更多的交互元素,例如添加一个按钮,让用户可以重置所有设置。
  • 把这个应用变成一个组件,这样可以在其他 Vue 项目中更方便地复用哦。

怎么样,是不是觉得 Vue.js 很有趣呢 希望你也能动手尝试一下,创建出属于自己的动态样式应用。如果你在开发过程中遇到什么问题,或者有什么新的想法,欢迎在评论区留言,让我们一起学习和进步吧 期待看到大家创造出更多精彩的 Vue.js 应用哦

八、注意事项

在使用这个应用时,要注意以下几点哦:

  • 确保你的文件引用路径正确,比如 style.cssmain.js 要和 HTML 文件在同一目录,不然可能会出现文件加载错误。
  • 要正确使用 v-model 指令,确保绑定的属性在 data 中已经定义。
  • 对于计算属性,要注意它们的计算逻辑,确保能正确地生成你想要的结果。

好啦,今天的分享就到这里啦 希望这篇博客能帮助你更好地理解 Vue.js 的这些特性,让我们一起在 Vue.js 的世界里继续探索吧!

**

在使用这个应用时,要注意以下几点哦:

  • 确保你的文件引用路径正确,比如 style.cssmain.js 要和 HTML 文件在同一目录,不然可能会出现文件加载错误。
  • 要正确使用 v-model 指令,确保绑定的属性在 data 中已经定义。
  • 对于计算属性,要注意它们的计算逻辑,确保能正确地生成你想要的结果。

好啦,今天的分享就到这里啦 希望这篇博客能帮助你更好地理解 Vue.js 的这些特性,让我们一起在 Vue.js 的世界里继续探索吧!

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

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

相关文章

css出现边框

前言 正常情况下&#xff0c;开启 contenteditable 属性后会出现 “黑色边框”。 如下图所示&#xff0c;很影响美观&#xff1a; 您可能想去掉它&#xff0c;就像下面这样&#xff1a; 解决方案 通过选择器&#xff0c;将 focus 聚焦时移除 outline 属性即可。 如下代码所示&a…

恋爱脑学编程之C++模板编程大冒险

一、模板编程初相识&#xff1a;开启泛型编程魔法之旅 嘿&#xff0c;小伙伴们&#xff01;今天咱们要一起探索C中超级厉害的模板编程。它就像是一把万能钥匙&#xff0c;可以打开各种类型数据的大门&#xff0c;让咱们写出超酷的与类型无关的代码&#xff0c;大大提高代码的复…

ubuntu 20.04 安装 5.4 内核

最近需要用linux 5.4内核&#xff08;发现它和5.14 在Block层有些差异&#xff09;&#xff0c;以对比和5.14内核的差异。目前已安装的虚拟机&#xff0c;Centos8的默认内核是4.18&#xff0c;Redhat9.1的内核是5.14&#xff0c;Ubuntu20.04的内核是5.15&#xff0c;故在ubuntu…

enzymejest TDD与BDD开发实战

一、前端自动化测试需要测什么 1. 函数的执行逻辑&#xff0c;对于给定的输入&#xff0c;输出是否符合预期。 2. 用户行为的响应逻辑。 - 对于单元测试而言&#xff0c;测试粒度较细&#xff0c;需要测试内部状态的变更与相应函数是否成功被调用。 - 对于集成测试而言&a…

netty解码器LengthFieldBasedFrameDecoder用法详解

Netty Netty是一个高性能、异步事件驱动的网络应用程序框架,它提供了对并发和异步编程的抽象,使得开发网络应用程序变得更加简单和高效。 在Netty中,EventLoopGroup是处理I/O操作的多线程事件循环器。在上面的示例中,我们创建了两个EventLoopGroup实例:bossGroup和worker…

继承(5)

大家好&#xff0c;今天我们继续来学习继承的相关知识&#xff0c;来看看子类构造方法&#xff08;也叫做构造器&#xff09;是如何做的。 1.6 子类构造方法 父子父子,先有父再有子,即:子类对象构选时,需要先调用基类构造方法,然后执行子类的构造方法 ★此时虽然执行了父类的…

Spring Boot 依赖配置分离多种打包方式

生产上发布 Spring Boot 项目时,但凡代码有一丁点改动,就得把整个项目包括依赖重新打包上传部署,这样的包很大,影响效率 为解决这个问题,可以把依赖(pom中的依赖jar包)、配置文件(resources 下的 applacation.yml 等文件)从项目主体里剥离出来,后续部署时,只需发布代…

VulnHub-Acid(1/100)

参考链接&#xff1a; ​​​​​​​【VulnHub】Acid靶场复盘-CSDN博客 靶场渗透&#xff08;二&#xff09;——Acid渗透_ambassador 靶场渗透-CSDN博客 网络安全从0到0.5之Acid靶机实战渗透测试 | CN-SEC 中文网 Vulnhub靶场渗透练习(四) Acid - 紅人 - 博客园 红日团队…

51c自动驾驶~合集45

我自己的原文哦~ https://blog.51cto.com/whaosoft/13020031 #运动控制和规划控制需要掌握的技术栈~ 各大垃圾家电造车厂又要开始了~~~​ 1、ROS的通信方式 李是Lyapunov的李&#xff1a;谈谈ROS的通信机制 话题通信和服务通信&#xff0c;其中话题通信是通过发布和订阅…

Debian、Ubuntu 22.04和ubuntu 24.04国内镜像源(包括 docker 源)

Debian 更换国内清华源 1、备份原文件mv /etc/apt/sources.list /etc/apt/sources.list.old 2、写入新源&#xff0c;以下是 Debian 11 的&#xff1a; cat > /etc/apt/sources.list << EOF deb https://mirrors.tuna.tsinghua.edu.cn/debian/ bullseye main contrib…

【Unity3D】AB包加密(AssetBundle加密)

加密前&#xff1a; 加密后&#xff0c;直接无法加载ab&#xff0c;所以无法正常看到ab内容。 using UnityEngine; using UnityEditor; using System.IO; public static class AssetBundleDemoTest {[MenuItem("Tools/打包!")]public static void Build(){//注意:St…

平面坐标转大地坐标(arcgisPro中进行)

1、将需要转换的红线导入arcgisPro中&#xff0c;如下&#xff1a; 2、在地图菜单栏中&#xff0c;选择坐标转换工具&#xff0c;如下&#xff1a; 3、打开坐标转换工具 4、开启捕捉 5、 设置大地坐标显示格式 6、如下&#xff1a; 7、显示如图&#xff1a; 8、再依次添加几个待…

Python 在PDF中添加数字签名

在数字化时代&#xff0c;文件的安全性和可信度变得尤为重要。无论是商业文件、法律文件还是个人文件&#xff0c;都可能需要证明其来源的真实性和完整性。PDF数字签名就是解决这些问题的关键工具。PDF数字签名不仅能够确保文件的安全性&#xff0c;还能提高工作效率&#xff0…

Mysql--基础篇--函数(字符串函数,日期函数,数值函数,聚合函数,自定义函数及与存储过程的区别等)

MySQL提供了丰富的内置函数&#xff0c;涵盖了字符串处理、数值计算、日期和时间操作、聚合统计、控制流等多种功能。这些函数可以帮助你简化SQL查询&#xff0c;提升开发效率。 除了内置函数&#xff0c;MySQL还支持自定义函数&#xff08;User-Defined Functions&#xff09;…

《 小A点菜》

题目背景 uim 神犇拿到了 uoi 的 ra&#xff08;镭牌&#xff09;后&#xff0c;立刻拉着基友小 A 到了一家……餐馆&#xff0c;很低端的那种。 uim 指着墙上的价目表&#xff08;太低级了没有菜单&#xff09;&#xff0c;说&#xff1a;“随便点”。 题目描述 不过 uim …

.net core 为什么使用 null!

为什么使用 null!&#xff1f; 通常在以下几种情况中&#xff0c;你可能会使用 null!&#xff1a; 属性值可能会在对象构造或某个方法中被初始化&#xff0c;但在构造函数或者对象完全初始化之前&#xff0c;属性的值可能会是 null。你知道这个属性最终会被赋一个非 null 的值…

STM32学习(十)

I2C模块内部结构 I2C&#xff08;Inter-Integrated Circuit&#xff09;模块是一种由Philips公司开发的二线式串行总线协议&#xff0c;用于短距离通信&#xff0c;允许多个设备共享相同的总线‌。 ‌硬件连接简单‌&#xff1a;I2C通信仅需要两条总线&#xff0c;即SCL&…

使用 Rust 实现零拷贝数据处理:性能优化的极致探索

随着大数据处理需求的不断增长&#xff0c;数据处理框架需要高效的内存管理能力以提升吞吐量与降低延迟。在本文中&#xff0c;我们将探索 Rust 语言如何利用零拷贝&#xff08;Zero-Copy&#xff09;的特性来构建高效的数据处理系统。这一技术尽管强大&#xff0c;但由于它对内…

Oracle job(定时任务)

1、job的作用 可以定时执行任务&#xff08;分/次、时/次、天/次等&#xff09; 2、创建job --创建job --注意点&#xff1a; --①job_no 为系统自动获取&#xff1b; --②存储过程名需要加‘&#xff1b;’ --③定时器开始执行时间可以填‘sysdate,表示立即执行 --④执行频…

nginx配置 - 资源参数配置(性能优化)

nginx - 资源参数配置 (性能优化) 一、worker_rilimit_nofile配置的含义使用场景如何调整参数系统级文件描述符限制(补充)二、worker_connections三、两者之间的数值关系四、sendfile五、keepalive_timeout本文重点讨论: 最大文件描述符数量 worker_rilimit_nofile和最大连…