vue绑定class和style

最新推荐文章于 2022-05-17 13:36:16 发布
最新推荐文章于 2022-05-17 13:36:16 发布
阅读量406 收藏 2
点赞数
分类专栏： vue 文章标签： vue class style vue绑定class和style
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyr0709/article/details/98215358
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>class和style属性</title>
	<script src="js/vue.js"></script>
	<script>
		window.onload=function(){
			var vm=new Vue({
				el:'#wrap',
				data:{ 
					bb:'aa',
					dd:'cc',
					flag:true,

					xx:{color:'blue',fontSize:'30px'}, //复合样式，采用驼峰式命名法
					yy:{backgroundColor:'yellow'}
				},
				methods:{ 
				}
			});
		};
	</script>
	<style>
		.aa{
			color:red;
			font-size: 20px;
		}
		.cc{
			background-color: #ccc;
		}
	</style>
</head>
<body>
	<div id="wrap">	
		<!-- 
			class属性
		 -->
		<!-- <p class="aa">欢迎光临</p> -->  <!-- 可以，普通css方式 -->

		<!-- <p :class="aa">欢迎光临</p>  --> <!-- 不可以，不能直接访问css样式 -->
		
		<!-- 用法1：变量形式 -->
		<!-- <p :class="bb">欢迎光临</p>  -->
		
		<!-- 用法2：数组形式，可以同时引用多个 -->
		<!-- <p :class="[bb,dd]">欢迎光临</p>  -->
		
		<!-- 用法3：json形式，可以直接访问css样式，flag中vue中的数据，true表示应用该样式，false表示不应用 -->
		<!-- <p :class="{aa:true,cc:flag}">欢迎光临</p>  -->

		<!-- 
			style属性
		 -->
		 <p :style="[xx,yy]">欢迎光临</p> 
	</div>
</body>
</html>

class属性绑定：

1.绑定变量

<div :class="{classA:a , classB: b,......}"/></div>

 new Vue({
        el:'#app',
        data:{
            a:true,//根据true/false判断是否执行class
            b:true
        }
    })

2.绑定对象

<div :class="test"></div>

 new Vue({
        el:'#app',
        data:{
            test:{
                color:red;
                background:yellow;
            }
        }
    })

3.绑定一个数组

<div :class="[test1,test2]"></div>

  new Vue({
        el:'#app',
        data:{
            test1Class:test1,
            test2Class:test2
        }
    })

4.绑定三元表达式

 :class="[A>B?'signSpanChange':'signSpan']" 

new Vue({
        el:'#app',
        data:{
            A:"",
            B:""
        }
})

style样式绑定:

1.绑定变量

:style="{color:cl,background:bk}"

new Vue({
        el:'#app',
        data:{
            cl:'red',
            bk:'yellow'
        }
  })

2.绑定一个对象

:style="testObj"

new Vue({
        el:'#app',
        data:{
            testObj:{
                color:red;
                background:yellow;
            }
        }
    })

3.绑定函数返回值

:style="{background:!flag?deep:BackType(sign.status)}"

methods: {
       BackType: function(status) {
      if (status == "已完成") return "#d7f2e6";
      if (status == "工作中") return "#23b7e5";
      if (status == "缺料" || status == "等待" || status == "配料完成")
        return "#ced0d1";
      if (status == "下班" || status == "转产") return "#f8ac59";
      if (status == "质检") return "#ed5565";
    }
  }

参考：https://blog.csdn.net/weixin_39581226/article/details/80682867
更多参考：Class 与 Style 绑定

doublesXu
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue】class和style的绑定
南栀的博客
02-10 781
文章目录classstyle 在vue中可以使用[v-bind]指令绑定class与style class 可以传给 v-bind:class 一个对象，以动态地切换 class <style> .divColor{ width: 100px; height: 100px; background-color: red; } </style> <div id="root" v-bind:class="{divCo
vue绑定class与行间样式style详解
08-29
主要介绍了vue绑定class与行间样式style的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue中Class与Style绑定
weixin_33949359的博客
10-30 138
操作元素的class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以使用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过拼接字符串比较麻烦，因此在v-bind用于class和style时，vue做了专门的增强，表达式结果的类型除了字符串之外，还可以是对象和数组。 绑定HTML Class (1) 对象...
Vue.js（6）：Class 与 Style 绑定
游王子的博客
10-06 365
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 一、绑定 HTML Class 对象语法 我们可以传给:class(v-bind:class的简写) 一个对象，以动...
Vue——Class和Style绑定
程序媛-jjl的博客
12-21 488
Class 与 Style 绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 绑定HTML
Vue入门-Class 与 Style 绑定
压缩疯雷的博客
10-19 134
Class 与 Style 绑定绑定 HTML Class对象语法数组语法三元表达式用在组件上绑定内联样式数组语法自动添加前缀多重值 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class
vue 中动态绑定class 和 style的方法代码详解
08-27
Vue 中动态绑定 Class 和 Style 的方法代码详解 Vue.js 作为一个响应的数据绑定系统，它允许我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。被绑定的 DOM 将与数据保持同步，每当数据有改动，...
vue.js入门教程之绑定class和style样式
10-21
在本篇文章中，我们将深入了解Vue.js中的数据绑定功能，特别是在绑定class和style样式方面的应用。这是初学者学习Vue.js时的一个重要环节，因为样式操作在Web开发中是非常常见和重要的需求。 首先，我们来探讨如何...
vuejs绑定class和style样式
10-20
本文将详细介绍如何在Vue.js中绑定class和style样式。 ### Class的绑定 在HTML中，class属性用于指定元素的类名，这些类名通常用于定义样式。在Vue.js中，我们可以使用`v-bind:class`指令来实现对class的动态绑定...
vue计算属性+vue中class与style绑定(推荐)
10-15
本文将重点探讨Vue中的两个核心特性：计算属性（Computed Properties）以及如何在模板中绑定类（Class）和样式（Style）。这些特性极大地提升了Vue应用的可维护性和表现力。 ### Vue计算属性 计算属性是Vue中用于...
Vue的Class与Style绑定的方法
12-29
本文介绍了Vue的Class与Style绑定，分享给大家，具体如下： 绑定 HTML Class 对象语法 我们可以传给 v-bind:class 一个对象，以动态地切换 class： <style> .exp{ border: 1px solid #ccc; } .forExp{...
学习vue.js中class与style绑定
10-20
除了动态绑定class之外，Vue.js也支持动态绑定style。在绑定style时，可以使用对象语法和数组语法。当使用对象语法时，对象的键可以是驼峰命名或短横线分隔（用引号括起来），而值则为需要应用的样式属性值。这种...
详解vue.js之绑定class和style的示例代码
10-19
yleBind', data: { theColor: 'blue', theSize: 16 }, methods: { bigger: function() {...通过以上示例，你将能够熟练掌握在Vue.js中如何使用v-bind指令来实现class和style的动态绑定，从而更好地控制组件的视觉表现。
vue.js绑定class和style样式（6）
10-20
在Vue.js中，绑定class和style是常见的操作，这使得我们可以动态地改变元素的外观，根据应用程序的状态。本文将深入探讨如何使用Vue.js的v-bind指令来实现这一功能。 首先，我们来看`v-bind:class`的用法。它可以...
vue.js学习笔记之绑定style样式和class列表
10-21
这篇文章将详细介绍如何在Vue.js中绑定class和style，以及使用对象和数组作为值的方法。 ### 绑定Class属性 Vue.js允许我们使用对象或数组来动态地绑定class属性。当绑定的对象字面量时，对象的属性名代表class的...
vue Class 与 Style 绑定
weixin_62141813的博客
05-17 423
Class 与 Style 绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class 语法格式: 使用方式：v-bind:class="expression" expr
vue中样式绑定class和style
酒馆不打烊
01-12 323
&amp;amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;amp;gt; .test{ width: 200px; height: 200px; background: skyblue; } .test1{ width: 200px; height: 200px; background: pink; } &amp;amp;lt;/sty
vue中Class 与 Style 绑定
qq_29124867的博客
01-24 127
一、绑定class 1、对象语法 <template> <div> // 1、给 v-bind:class 传入一个对象，以动态地切换 class <div v-bind:class="{ active: isActive }">123</div> // 2、在对象中传入更多字段来动态切换多个 class <div class="static" v-bind:class="{ activ
vue-class与style的绑定（详细）
meng的博客
09-07 245
绑定class与style都用v-bind v-bind:class=" " ==> 简写为:class=" " 这个" "字符串里边填的是对象或者数组 class = " { } / [ ] " 一、class绑定 1、对象 对象 也就是 键值对 {} —> key/value key对应的是要绑定的class的类名，value是个布尔值，为true表示可以绑定，为false反之： 渲染为： 2、数组 数组里放的每一项都是类名： 二、style绑定 1、对象 也可以写一个对象让其
vue动态绑定class和style
最新发布
11-08
Vue中动态绑定class和style可以通过v-bind指令实现。对于class，可以使用对象语法、数组语法和绑定一个返回对象的计算属性；对于style，可以使用对象语法和数组语法。具体方法如下： 1. 对象语法：将一个对象传给v-bind:class或v-bind:style，可以动态地切换class或style。例如：v-bind:class="{ active: isActive }"，其中isActive是一个data属性，当它为true时，元素会自动添加active类。 2. 数组语法：可以将多个class或style绑定到一个元素上。例如：v-bind:class="[activeClass, errorClass]"，其中activeClass和errorClass都是data属性，它们的值会被添加到元素的class属性中。 3. 绑定一个返回对象的计算属性：可以根据data属性的值动态地计算出一个class或style对象。例如：v-bind:class="classObject"，其中classObject是一个计算属性，它返回一个对象，对象的属性名是class名，属性值是布尔值，当属性值为true时，元素会自动添加该class。 4. 对象语法：将一个对象传给v-bind:style，可以动态地设置元素的style。例如：v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"，其中activeColor和fontSize都是data属性，它们的值会被设置为元素的color和fontSize属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值