Vue2.0学习笔记-6、vue中如何使用样式-(2)使用内联样式(v-bind指令的应用)

最新推荐文章于 2024-05-08 13:55:12 发布
最新推荐文章于 2024-05-08 13:55:12 发布
阅读量231 收藏
点赞数
分类专栏： vue学习笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41364246/article/details/109597490
版权

同样，这也是v-bind指令实现的
(1)直接在元素上通过:style的样式，书写样式对象
(2)将样式对象，定义到vue实例的data属性中，并通过:style的形式使用
(3)在:style中通过数组，引用vue实例的data属性中的多个样式对象
【注】当遇到带"-"的样式时，必须放在引号内，请仔细看下面的例子(background-color属性)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div id="div1" :style="styleObj1">
				我引用了一个vue实例的data属性中定义的样式
				<div id="div2" :style="{padding:'50px','background-color':'yellow'}">
					我的样式是直接书写的
					<div id="div3" :style="[styleObj2,styleObj3]">
						我引用了多个vue实例的data属性中定义的样式
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					styleObj1:{padding:'50px','background-color':'blue'},
					styleObj2:{height:'200px','background-color':'green'},
					styleObj3:{color:'red'}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

不收藏找不到我
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2绑定内联样式background的一些坑
大熊的博客
04-13 5658
此时我有一个需求，给一个盒子添加一个背景图片，这个背景图片是动态请求回来的，那么应该怎么做？看似简单，其实很考研对JavaScript基础的功底以及对vue生命周期的理解。正常情况下的vue内联样式如下写法：&lt;div :style="{ color: activeColor, fontSize: fontSize + 'px' }"&gt;&lt;/div&gt; data: { act...
Vue样式绑定v-bind
愤怒的小兵
03-03 405
Vue样式绑定v-bindclass绑定v-bind单独属性绑定v-bind属性绑定与classv-bind绑定计算属性v-bind绑定属性列表style绑定v-bind绑定style属性v-bind绑定style对象v-bind绑定style列表 class绑定 v-bind单独属性绑定 //html &lt;div v-bind:class="{ active: isActive }"&gt;...
vue2 14个指令详解，v-bind操作style，v-bind操作class，以及v-bind动态绑定图片地址不生效的问题
最新发布
小十七的个人分享博客
05-08 1037
​ 用v-on给表单控件绑定数据，此时数据是单向的，修改input的值data里面的数据不会发生变化，我们可以给输入框绑定input事件，给单/复选框、下拉框绑定change事件，触发事件时通过事件对象$event，拿到表单控件的值，然后赋值给data的数据，实现双向绑定。在 Vue 中使用动态绑定图片地址时，如果你使用相对路径，并且是在构建后的环境中（比如通过 webpack 或其他打包工具打包后部署到服务器上），可能会遇到路径解析不正确的问题。所在的元素会保持隐藏状态，直到Vue实例编译结束，
vue2 class与style动态绑定语法
qq_42880714的博客
06-12 2334
class与style都是标签内的属性，可以使用v-bind指令解析表达式来实现动态添加。vue对class与style做了专门的增强，classstyle的表达式结果类型可以是字符串、对象或者数组。
vue2中v-bind指令动态绑定样式
weixin_59084450的博客
09-12 1218
v-bind：类，这种绑定语法用于模块动态变换，这种格式指令的类包含两个值｛类名：值｝，值是布尔值，包括T和F，在data中定义，类名的值在style中定义，如下图 v-bind：类的值可以是多个元素从而绑定多个样式 也可以使用三目运算符绑定样式 同样的动态绑定样式还可以使用v-bind：style语法 如下图，color属性的值为color，变量值color在data中定义，fontsize的值size在data中定义， 同样可以使用三元运算符的值为T或者F来进行style绑
Vue2学习计划四：v-bind
ynztwlz的博客
08-01 1014
我们上一节讲了插值，主要是针对DOM的文本节点操作。那么如果现在有个需求，我们需要点击按钮，更换图片，怎么办？或者我们需要更换一下元素的样式该怎么实现呢？ Vue当然有办法，这就是v-bind的功效了。主要用于动态绑定属性。可以用冒号来缩写。 一、v-bind基本使用（动态绑定链接地址） 我们这里主要讲一下怎么使用v-bind和v-bind的语法糖，实现了数据动态绑定超链接a元素的href和图片的src属性。以后只需要修改Vue实例里的数据就可以更换图片和链接地址。 <div id="app">
Vue.js中用v-bind绑定class的注意事项
10-20
关于数据绑定一个常见...因为它们都是属性，我们可以用 v-bind 处理它们，但是使用v-bind绑定class的时候我们要有一些注意事项，下面这篇文章就给大家分享了下要注意的方面，希望能对大家有所帮助，下面来一起看看吧。
Vue绑定内联样式问题
10-17
- Vue 提供了 `v-bind:style` 指令，用于将数据对象中的属性值与HTML元素的内联样式绑定。这种方式允许我们在JavaScript中定义样式，并且可以根据Vue的数据模型进行实时更新。 2. **对象语法** - 对象语法允许...
Vue 2.0入门基础知识之内部指令详解
08-29
在Vue 2.0中，`v-slot`（在Vue 2.x中称为`slot`）用于定义插槽，允许组件自定义内容。 4. **指令的使用注意事项** - 指令的优先级：`v-if` 具有更高的优先级，它会先于 `v-for` 执行，因此避免在同一元素上同时...
vue.js2.chm中文手册下载
11-28
v-bind:class可以结合对象和数组实现多态的类绑定，v-bind:style则支持内联样式对象和字符串语法。 七、组件 组件是Vue.js的核心特性，它们是可复用的代码块，可以封装HTML、CSS和JavaScript。组件可以通过props...
vue-calculator:使用Vue 2的简单计算器
05-06
在"vue-calculator: 使用Vue 2的简单计算器"项目中，开发者利用Vue 2的特性创建了一个直观、易于使用的计算器应用。这个计算器主要由HTML、CSS和JavaScript（Vue.js）组成，展示了如何在实际项目中整合Vue的基本组件...
Vue2 样式控制案例v-bind控制style
知远同学的博客
01-21 506
【代码】Vue2 样式控制案例v-bind控制style。
Vue 2.0的学习笔记：在Vue中使用样式
shiki0083的笔记
05-27 6264
到目前为止，学习Vue的时候也写了相当的示例，但老实说，这些示例在视觉上并没有什么吸引人的地方。今天我们将学习如何将样式运用到我们的元素中，让事情变得更加有趣。首先我们将通过将内联样式添加到HTML的元素中，其实也就是我们以前所说的内联样式。其实在学习v-bind的时候，我们已经或多或少的接触了，如何给元素添加内联样式或者绑定类名添加样式。但这可能不够系统，为了更好的学习这方面的知识，这篇文章专门...
Vue学习之路第十二篇：为页面元素设置内联样式
weixin_30367169的博客
01-29 207
1、有了上一篇的基础，接下来理解内联样式的设置会更简单一点，先看正常的css内联样式： <dvi id="app"> <p style="font-size:30px;color:red">vue内联样式定义</p> </dvi> 在看看通过Vue的属相绑定实现的具体情况： <body> <...
Vue 2.0学习（五）v-bind及class与style绑定
angran1985的专栏
08-09 172
　　DOM元素经常会动态地绑定一些class类名或style样式。 基本用法 <div id="app"> <a v-bind:href="url">链接</a> <img v-bind:src="imgUrl"> <!-- 缩写为 --> <a :href="url"...
Vue学习（九）使用内联样式
weixin_41827712的博客
06-06 209
使用内联样式 1、 直接在元素上通过：style的形式，书写样式对象 2、 将样式对象，定义到data中，并直接引用到：style中 3、 在：style中通过数组，引用多个data上的样式对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
用源码解析Vue2，CSS内联样式的使用
2401_84092727的博客
04-06 554
外链图片转存中…(img-S5Kv1xsA-1712379559405)][外链图片转存中…(img-7EKfJTCI-1712379559406)]
在Vue中使用样式:class样式和style内联样式
m0_46322755的博客
05-11 1225
在Vue中使用样式:class样式和style内联样式
vue3.2样式v-bind
05-11
在 Vue 3.2 中，可以使用 `v-bind` 绑定样式。你可以通过 `v-bind` 绑定一个对象来设置样式。例如： ``` <template> <div :class="{ 'red': isRed }">Hello World</div> </template> <script> export default { data() { return { isRed: true } } } </script> <style> .red { color: red; } </style> ``` 在上面的例子中，我们使用 `:class` 绑定一个对象，当 `isRed` 为 `true` 时，会为 `div` 元素添加 `red` 类，从而使其显示为红色。 你也可以使用 `v-bind` 绑定一个对象来设置内联样式。例如： ``` <template> <div :style="{ color: textColor, backgroundColor: bgColor }">Hello World</div> </template> <script> export default { data() { return { textColor: 'red', bgColor: 'yellow' } } } </script> ``` 在上面的例子中，我们使用 `:style` 绑定一个对象，使用 `textColor` 和 `bgColor` 属性来设置字体颜色和背景颜色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值