Vue中Class和Style样式绑定

news/2024/11/28 7:34:29/

1. class样式绑定1

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../vue.js"></script><style>div {width: 200px;height: 50px;}.damao {color: red;}.ermao {background-color: green;}.FirstClass {border: thin solid black;}.SecondClass {background-color: yellow;}</style><!-- class样式处理：1. 对象语法实现; 2. 数组语法实现; -->
</head><body><div id="app"><!-- 1. 对象语法实现  --><div v-bind:class='{damao: true, ermao: true}'>直接写入类名</div>           <!-- 此种写法写死了 --><div v-bind:class='{damao: isDamao, ermao: isErmao}'>你好</div>             <!-- 此种写法后续可动态改变isDamao来...... --><button v-on:click='handle'>点击</button><hr><!--  2. 数组语法实现  --><div v-bind:class='["FirstClass", "SecondClass"]'>直接写入类名</div><div v-bind:class='[First, Second]'>通过data对象来对外暴露</div><button v-on:click='handle_Array'>点击</button></div><script>var vm = new Vue({el: '#app',data: {/* 对象形式： */isDamao: true,isErmao: true,/* 数组形式： */First: 'FirstClass',        Second: 'SecondClass'} ,methods: {handle: function() {this.isDamao = !this.isDamao;this.isErmao = !this.isErmao;},handle_Array: function() {this.First = '';this.Second = '';}}}); </script>
</body>
</html>

2. class样式绑定2

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../vue.js"></script><style>.damao {color: red;}.FirstClass {border: thin solid black;}.SecondClass {background-color: yellow;}.Font {color: green;font-size: 20px;}</style><!-- 1. 对象绑定 和 数组绑定可以结合使用;2. 可以进行简化处理;3. 行内中的class如何处理? => 不会被覆盖，一并使用;-->
</head><body><div id="app"><!-- 细节1： --><div v-bind:class='[First, Second, {damao: true}]'>你好</div><br><!-- 细节2： --><div v-bind:class='array'>你好</div><div v-bind:class='obj'>他好</div> <br><!-- 细节3： --><div class="Font" v-bind:class='array'>都好</div></div><script>var vm = new Vue({el: '#app',data: {First: 'FirstClass',Second: 'SecondClass',/* 简化处理： */array: ['FirstClass', 'SecondClass'],obj: {FirstClass: true,SecondClass: true,}}});</script>
</body></html>

3. class样式绑定3

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../vue.js"></script><style>.base {width: 100px;height: 100px;}.safe {background-color: green;}.danger {background-color: red;}</style>
</head><body><div id="app"><!-- 2. 通过v-bind:class绑定返回对象的计算属性 --><!-- 此外，我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式！ --><div v-bind:class="classObject"></div>       <!-- 最终显示为danger --></div><script>var vm = new Vue({el: '#app',data: {isActive: true,error: {value: true,type: 'fatal'}},methods: {},computed: {classObject: function () {return {base: true,safe: this.isActive && !this.error.value,danger: this.error.value && this.error.type === 'fatal',}}},watch: {}})</script>
</body></html>

4. style样式绑定1

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../vue.js"></script>
</head><body><div id="app"><!-- 十分注意：里面必须用逗号, 不能用分号; --><div :style='{ border: borderStyle, width:widthStyle, height:heightStyle }'>1</div> <div :style='objStyle'>2</div><div :style='[firstStyles, secondStyles]'>3</div></div><script>var vm = new Vue({el: '#app',data: {borderStyle: 'thin solid red',widthStyle: '100px',heightStyle: '200px',objStyle: {border: 'thin solid blue',width: '200px',height: '100px',},firstStyles: {color: 'green'},secondStyles: {backgroundColor: 'yellow'}},methods: {handle: function () {}}});</script>
</body></html>

5. style样式绑定2

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../vue.js"></script><style>div {width: 200px;height: 100px;}</style>
</head><body><div id="app"><!-- 1. 直接设置样式(之前的css属性在此处可以写为驼峰形式(无需加引号), 也可以写为短横线形式,此时必须加引号.否则报错) --><div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }">短横线形式</div><div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">驼峰形式</div><!-- 2. 直接绑定到一个对象--><div v-bind:style="styleObject">都是菜鸟</div><!-- 3. 数组形式的绑定 --><div v-bind:style="[styleObject,overrideStyle]">好吧</div><div @click='test(2,3)' style="background-color: yellow"></div>     <!-- 方法的测试 --></div><script>var vm = new Vue({el: '#app',data: {activeColor: 'green',fontSize: 30,styleObject: {color: 'red',fontSize: '30px'},overrideStyle: {'fontWeight': 'bolder'}},methods: {test(num1,num2) {alert(num1 + num2);}},computed: {},watch: {}});// vm.test(1,3);       /* 也可以直接用JavaScript的形式进行函数的调用 */</script>
</body></html>

6. 其他

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../vue.js"></script><style>.use {color: green;background-color: red;}.after {color: black;}</style>
</head><body><div id="app"><!-- 在注册组件的时候给它添加了use类选择器, 在使用它的时候又给它添加了类选择器, 实际上则相当于同时添加了use after两个类选择器 --><self-com class="after"></self-com>   </div><script>Vue.component('self-com',{      template: `<h1 class="use">组件使用class绑定</h1>`})var vm = new Vue({el: '#app',data: {},methods: {},computed: {},watch: {}})</script>
</body></html>

http://www.ppmy.cn/news/105161.html

相关文章

十二、Vben之Vue3+vite跨域代理地址实现

十二、Vben之Vue3+vite跨域代理地址实现

在vue2中使用proxy进行跨域的原理是：将域名发送给本地的服务器（启动vue项目的服务,loclahost:8080），再由本地的服务器去请求真正的服务器。 代码如下： 1.在proxy中设置要访问的地址，并重写/api为空的字符串，这里如果不重写，会相当于在代理的地址上默认加了/api，所以…
阅读更多...
一图看懂 autopep8 模块：自动格式化Python代码,以使其符合PEP8规范，资料整理+笔记（大全）

一图看懂 autopep8 模块：自动格式化Python代码,以使其符合PEP8规范，资料整理+笔记（大全）

本文由 大侠(AhcaoZhu)原创&#xff0c;转载请声明。 链接: https://blog.csdn.net/Ahcao2008 一图看懂 autopep8 模块&#xff1a;自动格式化Python代码,以使其符合PEP8规范&#xff0c;资料整理笔记&#xff08;大全&#xff09; &#x1f9ca;摘要&#x1f9ca;模块图&#…
阅读更多...
InsCode AI 创作助手：源于 CSDN 的 AI 创作助手，不一样的创作体验

InsCode AI 创作助手：源于 CSDN 的 AI 创作助手，不一样的创作体验

文章目录 &#x1f4cb;前言&#x1f3af;AIGC 时代的产物&#x1f3af;InsCode AI 创作助手体验&#x1f3af;一些感受和建议&#x1f9e9;感受&#x1f9e9;建议&#xff08;个人看法&#xff09; &#x1f4dd;最后 &#x1f4cb;前言 是的没错&#xff0c;CSDN AI 写作助手…
阅读更多...
Java线程之间如何通信的，有哪些方式？

Java线程之间如何通信的，有哪些方式？

线程之间的通信方式主要有以下几种&#xff1a; 共享变量&#xff1a;线程之间可以通过共享变量来进行通信。不同的线程可以共享同一个变量&#xff0c;并在变量上进行读写操作。需要注意的是&#xff0c;共享变量可能会引发线程安全问题&#xff0c;需要通过同步机制来确保线程…
阅读更多...
员工管理系统

员工管理系统

1.员工管理系统&#xff1a;Javaweb项目 管理系统需要包含1.成员查找 2.成员录入3.成员修改4.成员删除。&#xff08;要求&#xff1a;要求有员工类&#xff0c;查找员工时员工名称显示&#xff1a;名姓&#xff08;默认无复姓&#xff09; 例如&#xff1a;三张&#xff0c;修…
阅读更多...
ASP.NET公文管理系统的设计与实现(源代码+论文)

ASP.NET公文管理系统的设计与实现(源代码+论文)

随着网络信息化的高度发展，传统的以字符为主题的信息传播形式已不再满足需要。基于Web的办公系统显得越来越必要。本系统正是为了满足这样的需求而设计开发的。程序在Visual Studio 2003平台下使用VB.NET编程语言，数据库使用SQL SERVER 2000。 本公文系统实现了公文处理的自…
阅读更多...
centos安装KVM

centos安装KVM

文章目录 一、centos安装KVM步骤 1. 检查硬件支持 2. 安装 KVM 相关软件包 3. 启动 libvirtd 服务 4. 设置 libvirtd 服务自启动 5. 验证 KVM 安装 二、出现问题的解决方法 1. 检查网络连接 2. 检查 DNS 解析 3. 检查软件源设置 4. 禁用 IPv6 前言 本篇主要介绍cen…
阅读更多...
【译】Google Guava 的 Table 接口介绍

【译】Google Guava 的 Table 接口介绍

原文&#xff1a;https://www.baeldung.com/guava-table 1. 概述 在本教程中&#xff0c;我们将展示如何使用 Google Guava 的 Table 接口及其多个实现。 Guava 的 Table 是一种集合&#xff0c;表示包含行、列和相关单元格值的表结构&#xff0c;行和列充当有序的键对。 2…
阅读更多...
最新文章

Copyright @ 2022~2023