vue-class和style样式绑定
前言
操作元素的 class 样式列表和 style 内联样式为数据绑定是前端开发中一个常见的需求,这些样式都属于元素的属性 attribute ,因此我们可以通过 v-bind 来动态绑定元素的样式属性。本文来总结一下这两个属性相关的知识点,便于日后的复习学习。
正文
1.class的动态绑定
(1)对象语法,即class动态绑定一个对象。
- <style>
- .red {
- color: red;
- }
- .green {
- color: green;
- }
- </style>
- <div id="app">
- <!-- 绑定html clas样式 -->
- <div :class="{red:isRed,green:isGreen}">对象语法1</div>
- <div :class="classObj1">对象语法2</div>
- <div :class="classObj2">对象语法3</div>
- </div>
- <script>
- new Vue({
- el: "#app",
- data() {
- return {
- isRed: true,
- isGreen: false,
- classObj1: {
- red: true,
- green: false,
- },
- }
- },
- computed: {
- classObj2() {
- return {
- red: true,
- green: false,
- }
- },
- },
- })
- </script>
运行结果如下:
对于对象语法1:class 绑定一个字面量类型的对象值,其中 red 属性值为 true,green 属性值为 false ,最终结果为绑定了red类选择器的样式。
对于对象语法2和语法3:class 绑定一个对象的名,并非具体的对象的值,该键名对应了具体的对象value值,该对象的 red 属性为true,green属性为false,最终结果为绑定了red类型选择器的样式,语法2和语法3的区别在于对象的声明在计算属性还是data中。
(2)数组语法,即class动态绑定一个数组类型
- <style>
- .red {
- color: red;
- }
- .green {
- color: green;
- }
- </style>
- <div id="app">
- <!-- 绑定html clas样式 -->
- <div :class="[classRed,classGreen]">数组语法1</div>
- <div :class="[isRed?'red':'']">数组语法2</div>
- <div :class="classArr">数组语法3</div>
- <div :class="[{red:isRed},classGreen]">数组中对象混合用法</div>
- </div>
- <script>
- new Vue({
- el: "#app",
- data() {
- return {
- isRed: true,
- isGreen: false,
- classRed: "red",
- classGreen: "green",
- classArr:["red","green"],
- }
- }
- })
- </script>
运行结果如下:
对于数组语法1:class绑定一个数组值,其中数组中的元素代表每一个类选择器的样式,最终绑定结果为red和green选择器的样式,当color样式重复,页面渲染后面的样式,颜色为绿色。
对于数组语法2:class绑定一个数组值,只有一个元素,第一个元素由条件表达式确定。样式渲染如上。
对于数组语法3:class绑定一个数组名,并非具体的数组值,该名对应了具体的数组 value 值。
对于数组语法4:class绑定一个数组,数组中第一个元素为一个对象,不难理解。
(3)代码中常用的样式绑定
- <style>
- .red {
- color: red;
- }
- </style>
- <div id="app">
- <div :class="isRed?'red':''">代码中常用class绑定</div>
- </div>
- <script>
- new Vue({
- el: "#app",
- data() {
- return {
- isRed: true,
- }
- }
- })
- </script>
运行结果如下:
2.style的动态绑定
- <div id="app">
- <!-- 绑定内联样式 -->
- <div :style="{color:styleRed}">对象语法1</div>
- <div :style="styleObj1">对象语法2</div>
- <div :style="styleObj2">对象语法3</div>
- <div :style="[styleObj1]">数组语法</div>
- </div>
- <script>
- new Vue({
- el: "#app",
- data() {
- return {
- styleRed: "red",
- styleObj1: {
- color: "red"
- }
- }
- },
- computed: {
- styleObj2() {
- return {
- color: "red"
- }
- }
- },
- })
- </script>
运行结果如下:
style动态绑定样式,不需要再style标签中添加对应的类选择器,和原生js修改css样式十分接近。
写在最后
以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。
vue-class和style样式绑定的更多相关文章
- vue 自学笔记(4): 样式绑定与条件渲染
一:对象绑定 Vue 对于页面的样式加载也有独特的方式,按照 Vue 提供的方式,我们可以轻松的控制它们的呈现. 假使我们要实现点击 div 变色 Vue 提供的样式方案的本质是对元素节点进行属性的绑 ...
- vue 动态添加 <style> 样式 vue动态添加 绑定自定义字体样式
created(){ //动态添加自定义字体样式 let style = document.createElement('style'); style.type = "text/css&qu ...
- Vue.js 内联样式绑定style
html <div class="Menu" v-bind:style="{height:clientHeight}"> </div> ...
- vue基础篇---class样式绑定
因为class的绑定在实际的工作中会经常用到.所以特意记录一下,有好几种方法. 对象绑定方法,另外一个值来控制显示隐藏 <!DOCTYPE html> <html lang=&quo ...
- VUE中的style 样式处理的Scope (<style scope>)
在VUE组件中,为了让样式私有化,不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块. 但是这样的话,就会导致无法修改其他第三方组件样式,或者是内嵌的样式,解决方案 ...
- Vue样式绑定、事件绑定
1.样式绑定 1.1class类标签绑定 <p :class="对象"> <p :class="数组"> <p :class=&q ...
- Vue基础语法(样式绑定,事件处理,表单,Vue组件)
样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- 3-5 Vue中的样式绑定
Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...
随机推荐
- react踩坑笔记
1.create-react-app中配置webpack // 方法一:将项目的配置文件抽取到项目中,即运行: npm run eject // 方法二:使用react-app-rewired 2.c ...
- Git,Linux,Ubuntu,Tmux的常用命令
常用的连接 Git命令 廖雪峰的Git教程 Git常用命令 ubuntu16.04之GitHub入门教程 Linux相关 tmux命令 Ubuntu常用命令速查手册 Linux 命令大全 其它工具 M ...
- 【进阶之路】Java的类型擦除式泛型
Java选择的泛型类型叫做类型擦除式泛型.什么是类型擦除式泛型呢?就是Java语言中的泛型只存在于程序源码之中,在编译后的字节码文件里,则全部泛型都会被替换为原来的原始类型(Raw Type),并且会 ...
- ORACLE ORA-00933: SQL 命令未正确结束,
这个错误害我花了一天时间排查,最后原来是因为结束符,这种语句不能是分号,将分号即可执行成功. MERGE INTO MO_TRADE_COUNT_DAY A USING ( SELECT MAX(fl ...
- MySQL 中删除的数据都去哪儿了?
不知道大家有没有想过下面这件事? 我们平时调用 DELETE 在 MySQL 中删除的数据都去哪儿了? 这还用问吗?当然是被删除了啊 那么这里又有个新的问题了,如果在 InnoDB 下,多事务并发的情 ...
- C++ //继承中的对象模型 //利用开发人员命令提示工具查看对象模型 //父类中所有非静态成员属性都会被 子类继承下去 //父类中私有成员属性 是被编译器给隐藏了 因此是访问不到 但是确实被继承下去了
1 //继承方式 2 //语法:class 子类 :继承方式 父类 3 //继承方式 三种: 4 //1.公共继承 5 //2.保护继承 6 //3.私有继承 7 8 /* 9 #include &l ...
- 《Python Cookbook v3.0.0》Chapter2 字符串、文本
感谢: https://github.com/yidao620c/python3-cookbook 如有侵权,请联系我整改. 本文章节会严格按照原书(以便和原书对照,章节标题可能会略有修改),内容会有 ...
- windows运行Tomcat配置自定义的jdk环境运行。
找到tomcat下的bin目录下文件 setclasspath.bat 第二行加上你想运行的jdk路径即可. set "JRE_HOME=D:\Program Files (x86)\jdk ...
- 区块链-NFT 的实现原理
作者:林冠宏 / 指尖下的幽灵.转载者,请: 务必标明出处. 博客:http://www.cnblogs.com/linguanh/ 掘金:https://juejin.im/user/1785262 ...
- 【死磕 Java 基础】— 我同事一个 select 分页语句查出来了 3000W 条数据
大家好,我是大明哥,一个专注于[死磕 Java]系列创作的男人 个人网站:https://www.cmsblogs.com/.专注于 Java 优质系列文章分享,提供一站式 Java 学习资料 某天我 ...