Vue中绑定样式

已于 2022-03-28 16:35:29 修改
阅读量865 收藏 1
点赞数
分类专栏： vue 文章标签： vue
于 2022-03-28 16:33:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34932086/article/details/123799068
版权

Vue中绑定样式

绑定class样式–单个样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			.cl1{
                background-color: red;
            }
            .cl2{
                background-color: pink;
            }
            .cl3{
                background-color: blue;
            }
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="context">
			<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
			<div class="basic" :class="testCls" @click="changeMood"></div>
			
		</div>
	</body>

	<script type="text/javascript">
		
		const vm = new Vue({
			el:'#context',
			data:{
				name:'machoul',
				testCls:'cl1',
				classArr:['cl1','cl2','cl3']
			},
			methods: {
				changeMood(){
					const index = Math.floor(Math.random()*3)
					this.testCls = this.classArr[index]
				}
			},
		})
	</script>
</html>

绑定class样式–数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			.cl1{
                background-color: pink;
            }
            .cl2{
                border-radius: 5px;
            }
            .cl3{
                color: blue;
            }
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="context">
			<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
			<div class="basic" :class="classArr">{{name}}</div>
		</div>
	</body>

	<script type="text/javascript">
		
		const vm = new Vue({
			el:'#context',
			data:{
				name:'machoul',
				classArr:['cl1','cl2','cl3']
			}
		})
	</script>
	
</html>

绑定class样式–对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			.cl1{
        		background-color: pink;
	     	}
	      	.cl2{
	       		border-radius: 5px;
	      	}
	      	.cl3{
	        	color: blue;
	      	}
		</style>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="context">
            <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
			<div class="basic" :class="classObj">{{name}}</div> <br/><br/>
		</div>
	</body>

	<script type="text/javascript">
		
		const vm = new Vue({
			el:'#context',
			data:{
				name:'machoul',
        		classObj:{
					cl1:true,
					cl2:false,
          			cl3:true
				}
			}
		})
	</script>
	
</html>

绑定style样式–对象

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="context">
        <!-- 绑定style样式--对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div> <br /><br />
    </div>
</body>

<script type="text/javascript">

    const vm = new Vue({
        el: '#context',
        data: {
            name: 'machoul',
            styleObj: {
                fontSize: '40px',
                color: 'red',
            }
        }
    })
</script>

</html>

绑定style样式–数组

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="context">
        <!-- 绑定style样式--数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div>
    </div>
</body>

<script type="text/javascript">

    const vm = new Vue({
        el: '#context',
        data: {
            name: 'machoul',
            styleArr: [
                {
                    fontSize: '40px',
                    color: 'blue',
                },
                {
                    backgroundColor: 'gray'
                }
            ]
        }
    })
</script>

</html>
Machoul
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue绑定内联样式问题
10-17
其中，Vue绑定内联样式是用于动态地将样式应用于组件或元素的一种功能，这在需要根据数据变化来改变元素外观时非常有用。下面我们将深入探讨Vue绑定内联样式的相关知识。 1. **使用v-bind:style** - Vue 提供了 `v...
Vue 样式绑定的实现方法
10-17
Vue.js 是一个流行的前端框架，它的核心特性之一就是数据绑定，其中包括样式绑定。Vue 提供了灵活的方式来操作元素的 `class` 列表和 `style` 内联样式，使得动态响应式的界面设计变得简单易行。在Vue中，我们可以...
Vue中通过属性绑定为元素绑定style行内样式的实例代码
11-21
1.直接在元素上通过:style的形式，书写样式对象 这是一个H1 2.将样式对象定义在data中，并直接引用到:style中 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, } 2:在元素中，通过属性绑定的形式，将样式对象应用到元素中 这是一个H1 3.在:style中通过数组，引用多个data上的样式对象 1:
VUE——绑定样式
王王仙贝的博客
03-25 89
正常的样式正常写 变化的样式绑定写 绑定class样式——字符串写法，适用于：样式的类名不确定，需要动态绑定。 <div class="basic" :class="classstr" @click="changeMood">{{name}}</div> 绑定class样式——数组写法，适用于：要绑定的样式个数不确定、名字也不确定。 <div class="basic" :class="classarr" @click="changeMood">{{name}}<
Vue——样式绑定的几种方式
最新发布
专注写bug
06-03 708
样式绑定在vue中属于一种很常见的操作。在之前博客中针对样式的绑定操作，介绍了一个指令v-bind。缩写为:xxx。vue 官网 样式绑定。
Vue：绑定样式
沉迷写代码的程序猿的博客
03-23 618
Vue：绑定样式 一、绑定class样式 1、字符串写法 2、数组写法 3、对象写法 二、绑定style样式 1、对象写法 2、数组写法 三、总结 Vue：绑定样式 一、绑定class样式 1、字符串写法
vue中绑定样式
我不想说
02-19 211
比如我们要实现点击一次为红色，再点击还原，再点击红色，再点击还原，如此反复的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initia...
vue——Vue中样式的绑定
weixin_54362381的博客
08-21 324
Vue中样式的绑定 1、class的对象绑定 class的对象绑定: ：class=“{activated：isActivated}” data:{ isActivated:false } //根据对象中类的值为true/false，来绑定不同的类名，实现不同的样式 class的数组绑定 :class="[activated,activatedOne]" data:{ activated:"", activatedOne:"activated-one" } //数组里的每一项都是一个变量，通过设置每个变量
vue 动态绑定背景图片的方法
10-18
主要介绍了vue 动态绑定背景图片的方法,在文末给大家介绍了vue如何给v-for循环的标签添加背景图片，需要的朋友参考下吧
Vue.js样式动态绑定实现小结
01-21
在项目中，我们时常会遇到动态的去绑定操作切换不同的CSS样式，结合自身项目中遇到的一些情况，也参考了一些文档，针对vue.js样式的动态绑定切换做出如下小结： 动态切换的核心思想： 利用vue指令v-bind来实现动态...
Vue样式的绑定
Flora's Zone
04-28 2080
Vue样式的绑定
vue绑定样式的三种方法
weixin_42064877的博客
06-12 739
vue绑定样式的三种方法
Vue 中的样式绑定
zhangbin18607544869的博客
11-02 748
一）样式绑定概念 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 二）通过对象语法绑定 HTML 的 Cla...
vue中的几种样式绑定的方法
老衲的少女心i~
06-16 781
vue中几种常见的样式绑定方法总结
vue通过属性绑定为元素绑定style行内样式
line233的博客
05-02 3246
1.直接在元素上通过 :style写一个对象 在对象中设置颜色时要注意：颜色只能用单词表示，不能使用十六进制 #... 和rgb形式 和 这两种都会报错。 2.在data中创建一个样式对象，通过:style引用 3.在 :style中通过数组，引用多个data上的样式对象 ...
VUE 样式绑定
qixiang_chen的博客
01-13 348
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。 绑定 HTML Class &lt;!DOCTYPE html&...
【Vue框架】Vue绑定样式及案例之行内样式——对象绑定样式与数组控制样式（附带源码案例)
量化Mike
04-05 828
Vue通过v-bind动态样式绑定。 1.2 Vue绑定行内样式 1.2.1 对象控制绑定样式 行内动态样式 1、动态style样式属性需要加引号,否则变为变量 2、属性名称不能包含“-”,需要将中间首字母变为大写 如: font-size => fontSize 1.2.2 数组控制绑定样式 1.3 Vue绑定样式案例(标题排他) 1.4 v-if和v-show指令 1.5 v-if实现选项卡案例 1.6 购物车实例
Vue样式绑定
LTQQN的博客
06-06 243
在此案例中，样式绑定1的样式来自style中的style1，因为在return返回值中将istrue设置为true，则style1中的样式是可以显示在页面中，若将istrue设置为false，则style1中的样式不会显示在页面中；在本例中，我们给“得到”和“修改”分别添加了点击事件，点击“得到”，则输入框中的内容会给到页面中显示，若点击“修改”，则页面中和输入框中都会显示“我给你改了-email”；.lazy：也是给表单元素添加事件监听，可以在点击“得到”时，可以将输入框中的数字传给页面中；
Vue的样式绑定
qq_46149597的博客
11-03 2896
Vue的样式绑定有v-bind:class、v-bind:style,分为内联绑定、非内联绑定、计算属性绑定、数组语法绑定
vue动态绑定样式style
05-17
Vue动态绑定样式可以使用`v-bind:style`或简写`:style`指令。它可以将一个对象或返回一个对象的计算属性绑定到元素的样式上。 以下是一个例子： ```html <template> <div :style="{ color: textColor, fontSize: fontSize + 'px' }">Hello World</div> </template> <script> export default { data() { return { textColor: 'red', fontSize: 16, } }, } </script> ``` 在这个例子中，我们使用`:style`指令将一个对象绑定到`div`元素。这个对象有两个属性：`color`和`fontSize`。它们的值是从组件的`data`中获取的，这些值可以动态地更改。 注意，当绑定样式时，属性名应该使用驼峰命名法，例如`fontSize`，而不是`font-size`。在绑定属性值时，需要将像素值转换为字符串，并添加单位“px”。在上面的例子中，`fontSize`属性的值为`16`，但是在样式绑定中，我们将其转换为`'16px'`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值