Vue中样式的绑定class与style

最新推荐文章于 2023-08-14 16:07:31 发布
最新推荐文章于 2023-08-14 16:07:31 发布
阅读量148 收藏
点赞数
分类专栏： Vue 文章标签： vue样式绑定 vue class vue style
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38402659/article/details/87874605
版权

first way
class的对象绑定

<div id="app">
  <div :class="{colorred:isred}" >message</div>
</div>

data:{
  isred:true
}

Dom

message

Second way:

<div id="app">
  <div :class="[colorclass,colorclassone]" >message</div>
</div>

data:{
  colorclass:"colorred",
  colorclassone:"fontsize12"
}

Dom

message 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.colorred{color: red;}
		</style>
	</head>
	<body>
		<div id="app">
			<div @click="handleClickDiv" :class="{colorred:becomered}">
				hello wold!
			</div>
		</div>
		
		<div id="app1">
			<div @click="handleClickDiv" :class="[becomered]">
				hello wold!
			</div>
		</div>
		
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					becomered:false
				},
				methods:{
					handleClickDiv:function(){
						this.becomered=!this.becomered
					}
				}
			})
			
			new Vue({
				el:'#app1',
				data:{
					becomered:""
				},
				methods:{
					handleClickDiv:function(){
						
						if(this.becomered=="colorred"){
							this.becomered=""
						}else{
							this.becomered="colorred";
						}
					}
				}
			})
		</script>
	</body>
</html>
css3html5csdn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
学习vue.js中class与style绑定
10-20
总之，Vue.js中的class与style绑定是一个非常实用的功能，它使得开发者能够方便地根据数据的变化来动态调整元素的样式。这不仅提升了开发效率，还增强了页面的交互体验。对于有兴趣深入学习Vue.js的开发者来说，掌握...
Vue-样式绑定（Class与Style）
weixin_45497246的博客
05-01 692
操作元素的 class 列表和内联样式是数据绑定的一个常见需求，我们可以通过v-bind（或者简写为：）进行绑定，它后边跟的就是一个表达式，其类型除了字符串之外，还可以是对象或数组。 那么v-bind是如何绑定class的呢？ 1.对象语法（class的对象绑定） 我们可以传给 v-bind:class 一个对象（对象中也可以传入更多字段），以动态地切换 class： <div v-bind...
Vue 通过style属性、class属性来动态修改CSS样式
weixin_43818307的博客
07-11 2万+
vue使用v-bind绑定style属性或class属性，动态修改CSS样式。动态修改style，动态修改class。
Vue绑定css 样式常用几种方式（class---style)
weixin_45655721的博客
08-02 1940
Vue绑定css 样式常用几种方式（class---style)
vue绑定class
ead_gbe的博客
07-02 4270
字符串写法：适用于样式的类名不太确定，需要动态指定的情况。代码中的backgroundColor是变量名数组写法：适用于样式的数量不太确定，名字也不太确定，需要后期动态添加或删减的。对象写法：适用于样式的数量确定，名字确定，但要动态决定用不用。
Vue学习笔记(1)-常用指令
banxiecang9548的博客
09-04 230
为什么学习Vue 企业需要 可以提高开发效率 - M => Model(数据模型)- V => View(视图模型,负责将数据模型转化成UI展现出来，就是那些DOM结构)- VM => ViewModel(一个同步View和Model的对象) Vue初体验 <!DOCTYPE html> <html lang="en">...
Vue中使用v-bind:class动态绑定多个类名
最新发布
码农键盘上的梦
08-14 1829
在上述代码中，我们设置了一个类名为container的主容器元素，然后将三个样式类名（color、size和font）用数组的形式统一传递给了v-bind:class指令。在Vue.js开发中，经常需要动态绑定HTML元素的class（类名）属性，以改变元素的外观和行为。在Vue中，我们可以使用v-bind:class指令动态绑定HTML元素的class属性。具体说来，v-bind:class可以接受一个对象作为参数，在这个对象中，每个属性的键名表示一个类名，键值表示该类名是否被应用到元素上。
vue绑定class与行间样式style详解
08-29
Vue 绑定 Class 与行间样式 Style 详解 Vue 是一个流行的前端框架，提供了强大的绑定机制来控制 HTML 元素的样式。今天，我们将详细介绍 Vue 绑定 Class 与行间样式 Style 的相关知识点。 绑定 Class 在 Vue 中，...
vue计算属性+vue中class与style绑定(推荐)
10-15
本文将重点探讨Vue中的两个核心特性：计算属性（Computed Properties）以及如何在模板中绑定类（Class）和样式（Style）。这些特性极大地提升了Vue应用的可维护性和表现力。 ### Vue计算属性 计算属性是Vue中用于...
vue.js绑定class和style样式（6）
12-29
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出...绑定class <div class=test> <div class={active:isActive,cc:isCc}> </div>
Vue.js 中的 v-bind 指令详解
it_xushixiong的博客
06-09 2680
Vue.js中的v-bind指令是一种将组件的属性绑定到Vue实例的数据的方式。v-bind指令可以用于将任何组件属性绑定到Vue实例的数据上，例如class、style、属性等。v-bind指令允许我们动态地设置组件的属性，从而使组件更加灵活和可重用。v-bind指令可以使用简写形式进行使用，即通过添加一个前缀符号，例如:class:style等。这使得代码更加简洁和易于阅读。在本文中，我们将深入探讨v-bind指令的使用方法和一些实际的代码示例。
初学必懂—vue绑定class的几种方式+绑定内联样式总结
Xmumu_的博客
03-17 3339
文章目录对象语法数组语法 对象语法 最常见的就是给v-bind:class设置一个对象，可以动态切换class： <div id="app"> <div :class = "{'active': isActive}">active生效</div> </div> <script> var app = new Vue({ el: '#app', data: { isActive:true
vue中class绑定
m0_64544033的博客
02-15 168
vue中class绑定的方法
Vue官网教程-Class与Style绑定
weixin_33882443的博客
08-25 145
就是给挂载后，里面的元素动态的添加class <style> .red{ background-color: red; } </style> <div id="app"> <!-- 绑定class = red，然后red是否显示，与isRed有...
vue动态绑定class的几种方式
热门推荐
前端那点事的博客
10-30 11万+
#####对象方法 -最简单的绑定（这里的active加不加单引号都可以，以下也一样都能渲染） :class=&quot;{ 'active': isActive }&quot; 判断是否绑定一个active :class=&quot;{'active':isActive==-1}&quot; 或者 :class=&quot;{'active':isActive==index}&quot; 绑定并判断多个 第一种（用
vue学习06--v-bind:class和v-bind:style
黄某人的爬坑之路
11-02 4856
所有代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>v-bind - 绑定页面中的元素属性</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
【Vue学习总结】5.Vue绑定属性、Html、class、style
程序猿之洞
08-02 1643
接上篇《4.绑定数据和对象、循环数组渲染数据》 上一篇我们主要讲解了Vue的基础语法，绑定数据、对象，以及如何循环数组和渲染数据，本篇我们主要来介绍Vue属性、Html、class以及style的操作。 本系列博文使用的Vue版本：2.6.11 一、绑定属性 上一篇我们讲解了Vue如何绑定数据，例如下面msg里面的值： <h2>{{msg}}</h2> 在Vue中就可以使用data()函数来动态绑定msg的值 <script> export default
前端/angualr html中style和class的区别以及常用的元素属性
jeason_chan_zju的博客
10-26 4184
举个例子： test.html <html> ...... <link rel="stylesheet" type="text/css" href="style.css" /> ...... <div id="div1" style="border-top: red 1px solid;"> <div id="div2" class="divClass"&...
Vue中常用绑定class的三种方法
y1314999的博客
08-31 893
绑定class的三种方法： <!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"
vue中style和class
05-30
在 Vue 中，可以使用 style 和 class 绑定语法来动态绑定样式和类。 ### 动态绑定 style 可以使用 v-bind:style 指令将一个对象传递给 style 属性，从而动态绑定样式。对象中的键是 CSS 属性名，值是对应的 CSS 属性值。 例如，可以动态绑定文本颜色： ```html <template> <div v-bind:style="{ color: textColor }">This text is {{ textColor }}</div> </template> <script> export default { data() { return { textColor: 'red' } } } </script> ``` 在这个例子中，使用 v-bind:style 指令将一个对象传递给 style 属性。对象中的键是 color，值是 textColor 变量的值。 ### 动态绑定 class 可以使用 v-bind:class 指令将一个对象传递给 class 属性，从而动态绑定类。对象中的键是类名，值是一个布尔值，如果值为 true，则对应的类将被应用，否则该类将被移除。 例如，可以根据条件动态绑定类： ```html <template> <div v-bind:class="{ red: isRed, bold: isBold }">This text is styled</div> </template> <script> export default { data() { return { isRed: true, isBold: false } } } </script> <style> .red { color: red; } .bold { font-weight: bold; } </style> ``` 在这个例子中，使用 v-bind:class 指令将一个对象传递给 class 属性。对象中的键是类名，值是一个布尔值。如果 isRed 的值为 true，则 red 类将被应用；如果 isBold 的值为 false，则 bold 类将被移除。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值