Vue核心⑥(绑定样式)

已于 2022-07-15 00:10:18 修改
阅读量530 收藏 2
点赞数 4
分类专栏： Vue # Vue2 文章标签： vue.js javascript 前端
于 2022-06-07 12:20:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyb18507175502/article/details/125159429
版权
Vue 同时被 2 个专栏收录
41 篇文章 10 订阅
订阅专栏
Vue2
41 篇文章 1 订阅
订阅专栏

文章目录

绑定class样式

通过字符串绑定

现在有几组样式。 basic是基本样式必须有，happy、sad、normal这三组样式必选其一，add1、add2、add3这三组样式可以叠加，我们现在将他们添加到某一个元素身上。
在这里插入图片描述

按照我们以前的想法，肯定是直接操作DOM，先去获得元素，再去添加。但是使用了Vue我们可以利用数据绑定。如下：

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> 
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'CSDN',
				mood:''
			},

			methods: {
				changeMood(){
					const li = ['happy','sad','normal']
					let rand = Math.floor(Math.random()*3)
					this.mood = 'add1 add2 add3' + ' ' +li[rand]
				}
			},
		})
	</script>

我们把固定类型basic写死在class中，动态变化的类型使用v-bind进行数据绑定。

这种字符串写法，适用于：样式的类名不确定，需要动态指定的情况。

通过数组绑定

接下来我们提出另一个需求：我们可能随时需要 添加/去掉 绑定。

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> 
			<div class="basic" :class="arr" @click="changeMood1">{{name}}</div> 
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'CSDN',
				mood:'',
				arr:['add1','add2','add3']
			},

			methods: {
				changeMood(){
					const li = ['happy','sad','normal']
					let rand = Math.floor(Math.random()*3)
					this.mood = 'add1 add2 add3' + ' ' +li[rand]
				},
				changeMood1(){
					this.arr.shift()
				}
			},
		})
	</script>

这种数组写法，适用于：要绑定的样式个数不确定，名字也不确定。

通过对象绑定

再来一个需求：我们已经确定可能使用两个样式。

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> 
			<div class="basic" :class="arr" @click="changeMood1">{{name}}</div>
			<div class="basic" :class="obj" @click="changeMood2">{{name}}</div>  
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'CSDN',
				mood:'',
				arr:['add1','add2','add3'],
				obj:{
					add1:true,
					add2:false
				}
			},

			methods: {
				changeMood(){
					const li = ['happy','sad','normal']
					let rand = Math.floor(Math.random()*3)
					this.mood = 'add1 add2 add3' + ' ' +li[rand]
				},
				changeMood1(){
					this.arr.shift()
				},
				changeMood2(){
					this.obj.add2 = true
				},
				
			},
		})
	</script>

这种对象写法适用于：要绑定的样式个数确定、名字也确定，但动态决定用不用。

绑定style样式

通过对象绑定

例如我们点击缩小字体

代码如下：

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> 
			<div class="basic" :class="arr" @click="changeMood1">{{name}}</div>
			<div class="basic" :class="obj" @click="changeMood2">{{name}}</div>
			<div class="basic" :style="styobj" @click="changeMood3">{{name}}</div>  
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'CSDN',
				mood:'',
				arr:['add1','add2','add3'],
				obj:{
					add1:true,
					add2:false
				},
				styobj:{
					fontSize:'50px'
				}
			},

			methods: {
				changeMood(){
					const li = ['happy','sad','normal']
					let rand = Math.floor(Math.random()*3)
					this.mood = 'add1 add2 add3' + ' ' +li[rand]
				},
				changeMood1(){
					this.arr.shift()
				},
				changeMood2(){
					this.obj.add2 = true
				},
				changeMood3(){
					this.styobj.fontSize = '10px'
					this.styobj.backgroundColor = 'red'
				},

				
			},
		})
	</script>

注意：对象的属性要与css中的属性相对应，带有横杠的命名方式改为驼峰命名法。

使用数组的方式绑定

数组里面装的是样式对象

样式对象的特点就是其中的属性名要与css中的样式相对应

例如：

	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<div class="basic" :class="mood" @click="changeMood">{{name}}</div> 
			<div class="basic" :class="arr" @click="changeMood1">{{name}}</div>
			<div class="basic" :class="obj" @click="changeMood2">{{name}}</div>
			<div class="basic" :style="styobj" @click="changeMood3">{{name}}</div>
			<div class="basic" :style="styarr" @click="changeMood4">{{name}}</div>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'CSDN',
				mood:'',
				arr:['add1','add2','add3'],
				obj:{
					add1:true,
					add2:false
				},
				styobj:{
					fontSize:'50px'
				},
				styobjPro:{
					margin:'50px'
				},
				styarr:[this.styobj]
			},

			methods: {
				changeMood(){
					const li = ['happy','sad','normal']
					let rand = Math.floor(Math.random()*3)
					this.mood = 'add1 add2 add3' + ' ' +li[rand]
				},
				changeMood1(){
					this.arr.shift()
				},
				changeMood2(){
					this.obj.add2 = true
				},
				changeMood3(){
					this.styobj.fontSize = '10px'
					this.styobj.backgroundColor = 'red'
				},
				changeMood4(){
					this.styarr.push(this.styobjPro)
				},

				
			},
		})
	</script>

总结：
在这里插入图片描述

十八岁讨厌编程
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
Vue绑定样式，条件渲染，列表渲染
嘤嘤鸭的博客
10-19 325
Vue绑定样式，条件渲染，列表渲染
Vue2的数据绑定
嗨皮的博客
01-03 1940
Vue的数据双向绑定、事件绑定、以及class与style样式的绑定
Vue2学习四-Vue核心（绑定样式、条件渲染）
m0_48205251的博客
06-11 486
选择 v-if 还是 v-show 主要取决于你的具体需求：如果你需要根据条件频繁切换元素的可见性，v-show 是更好的选择；如果你需要根据条件控制元素的渲染，并且这种情况不频繁发生，v-if 更适合。:style="[a,b]"其中a、b是样式对象。使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。写法:class="xxx" xxx可以是字符串、对象、数组。对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。(2).v-else-if="表达式"2. style样式。
Vue核心 绑定样式 条件渲染
weixin_44230693的博客
05-05 718
Vue核心 绑定样式 条件渲染
vue 动态绑定
2401_85123379的博客
06-11 957
一、前言大家好，我是哪吒，一个热爱技术的年轻人，架构师，是每一个程序员的梦想，因此，作为一个Java后端程序员，突击前端，迫在眉睫，而目前来说，最火的前端框架无疑就是Vue，我们公司前端也都是Vue，每次与前端联调的时候，因为对前端知识的匮乏，总是很无奈，不破不立，我决定花49天时间，系统的学习一下Vue。因为酷爱斗破苍穹，这一系列就按照斗破苍穹中萧炎的成长历程为系列标题吧。二、百度百科Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。[5]
Vue基础知识总结 2：vue 动态绑定
热门推荐
学Java，找哪吒
07-15 1万+
大家好，我是哪吒，一个热爱技术的年轻人，架构师，是每一个程序员的梦想，因此，作为一个Java后端程序员，突击前端，迫在眉睫，而目前来说，最火的前端框架无疑就是Vue，我们公司前端也都是Vue，每次与前端联调的时候，因为对前端知识的匮乏，总是很无奈，不破不立，我决定花49天时间，系统的学习一下Vue。因为酷爱斗破苍穹，这一系列就按照斗破苍穹中萧炎的成长历程为系列标题吧。
vue 计算后绑定 css,Vue.js样式动态绑定实现小结
weixin_39901077的博客
08-04 417
在项目中，我们时常会遇到动态的去绑定操作切换不同的CSS样式，结合自身项目中遇到的一些情况，也参考了一些文档，针对vue.js样式的动态绑定切换做出如下小结：动态切换的核心思想：利用vue指令v-bind来实现动态绑定，从而设置切换不同的样式～vue的最大特点是数据驱动，利用特殊的语法将DOM“绑定”到底层数据，DOM与数据保持同步，每当数据发生变化，DOM视图就会做出相应的更新和响应，正是基于这...
vue核心基础
m0_48860371的博客
10-10 720
vue初始，指令使用
Vue.js之绑定style样式
weixin_44827643的博客
07-11 929
上文介绍了如何利用Vue.js绑定类，本文将介绍通过Vue.js进行样式修改的另一种方法，即通过style来修改。核心：为元素绑定style属性，通过对象的形式赋予样式，属性名为样式名（要使用驼峰命名法），属性值为字符串。若要引入多组样式，可以利用数组，后面出现的重复属性会覆盖之前的属性，如下例中的height。当然，也可以于元素行内赋予样式，这时可以通过在data中定义数据控制样式的变化。 效果如图：......
Vue.js样式动态绑定实现小结
01-21
在项目中，我们时常会遇到动态的去绑定操作切换不同的CSS样式，结合自身项目中遇到的一些情况，也参考了一些文档，针对vue.js样式的动态绑定切换做出如下小结： 动态切换的核心思想： 利用vue指令v-bind来实现动态...
绑定手机号-VUE模板 UNIAPP模板 布局、样式、JS分离
04-22
在本模板中，"绑定手机号"的功能是核心部分，它涉及到用户认证的重要环节。 UniAPP则是一个基于Vue.js的多端开发框架，它允许开发者使用一套代码库编写应用，然后发布到iOS、Android、Web（H5）等多个平台。 UniAPP...
Vue.js每天必学之Class与样式绑定
10-21
Vue.js 是一款流行的前端框架，它的核心特性之一是数据绑定，其中包括对HTML元素Class和样式的动态绑定。在本文中，我们将深入探讨Vue.js中如何处理Class与样式绑定。 首先，我们来了解一下如何绑定HTML Class。Vue...
Vue 样式绑定的实现方法
10-17
Vue.js 是一个流行的前端框架，它的核心特性之一就是数据绑定，其中包括样式绑定。Vue 提供了灵活的方式来操作元素的 `class` 列表和 `style` 内联样式，使得动态响应式的界面设计变得简单易行。在Vue中，我们可以...
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2589
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 527
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1293
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
开发适合el-dialog的拉伸拖拽自定义指令和适配自定义的图片查看组件
最新发布
鹤渺的星球
09-05 1039
我之前有开发过一个图片查看的组件，这个组件可在单页面打开，也可以在弹窗里打开，但是弹窗因为是比较固定，所以有一些局限性，只能拖拽，不能改变弹窗大小，于是有了开发【可以拖拽改变大小的弹窗】组件。通过自定义指令，实现弹窗的移动拖拽拉伸等功能动态计算弹窗的位置与尺寸，因为弹窗的位置和尺寸是动态计算的，涉及到鼠标的实时位置和弹窗初始位置之间的关系。代码也贴上去了，仅供参考。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 510
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
Vue.js动态样式绑定实践与总结
这篇文章提供了Vue.js中动态绑定`class`和`style`属性的两种实用方法，以及对数据驱动核心概念的深入理解，对于开发者在实际项目中灵活运用Vue.js进行动态样式控制具有很高的参考价值。希望读者在阅读后能够掌握这些...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

十八岁讨厌编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值