VUE指令-样式绑定v-bind

最新推荐文章于 2024-04-29 12:01:49 发布
最新推荐文章于 2024-04-29 12:01:49 发布
阅读量759 收藏
点赞数
文章标签： vue bind
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/llzkkk12/article/details/78887764
版权
样式绑定v-bind

操作元素的 class列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

v-bind:style

<!-- 格式v-bind:style="{ key:value }" -->

<!-- 格式v-bind:style="[dataStyle0,dataStyle1]" -->

<!-- 样式属性不添加''，将缩写为java驼峰命名变量 'font-size' >>> fontSize -->

<div style="height: 180px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v1.v-bind:style="{ key:value }"</div>

     <hr />

     <div>

         <div v-bind:style="{ color:colorVar , fontSize:fontVar + 'px'}">

              Name

         </div>

         <div v-bind:style="[dataStyle0,dataStyle1]">

              Name

         </div>

     </div>

</div>

 

v-bind:class

<!-- 格式v-bind:class="{ clazzStyle , isBind }" -->

<!-- 格式v-bind:class="clazzObject" ,obj包含需要绑定的样式 -->

<!-- 格式v-bind:class="[clazz0,clazz1]" ,clazz定义在data的样式对象 -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v0.v-bind指令示例(class)</div>

     <hr />

     <div>

         <div v-bind:class="{ style0 : isBind ,style1:true}">

              Name

         </div>

         <div v-bind:class="clazzObj">

              Name

         </div>

         <div v-bind:class="cssClazz">

              Name

         </div>

     </div>

</div>

 

<!DOCTYPE html>
<html style="height: 100%;">

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="../lib/vue.v2.5.12.js" ></script>
		<title>HelloDemo</title>
	</head>

	<body style="height: 100%;">
		<style>
			.style0{
				font-size: 25px;
				color: green;
			}
			.style1{
				background: gold;
			}			
		</style>
		<!-- 
			VUE指令v-bind样式绑定指令
				
			REF:
				http://www.runoob.com/vue2/vue-class-style.html
				https://cn.vuejs.org/v2/guide/class-and-style.html
		-->
		<div id="appVue">
			<!-- 格式v-bind:class="{ clazzStyle , boolean表达式 }" -->
			<div style="height: 200px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v0.v-bind条件渲染(value,key,index)</div>
				<hr />
				<div>
					<div v-bind:class="{style0: 5 > 1}">
						Name
					</div>
				</div>
			</div>

			<!-- 格式v-bind:style="{ key:value }" -->
			<!-- 格式v-bind:style="[dataStyle0,dataStyle1]" -->
			<!-- 样式属性不添加''，将缩写为java驼峰命名变量 'font-size' >>> fontSize -->
			<div style="height: 180px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v1.v-bind:style="{ key:value }"</div>
				<hr />
				<div>
					<div v-bind:style="{ color:colorVar , fontSize:fontVar + 'px'}">
						Name
					</div>
					<div v-bind:style="[dataStyle0,dataStyle1]">
						Name
					</div>								
				</div>
			</div>
			
			<!-- 格式v-bind:class="{ clazzStyle , isBind }" -->
			<!-- 格式v-bind:class="clazzObject" ,obj包含需要绑定的样式 -->
			<!-- 格式v-bind:class="[clazz0,clazz1]" ,clazz定义在data的样式对象 -->
			<div style="height: 150px;background: #CCC;margin: 5px;">
				<div style="font-size: 20px;">
					v0.v-bind指令示例(class)</div>
				<hr />
				<div>
					<div v-bind:class="{ style0 : isBind ,style1:true}">
						Name
					</div>
					<div v-bind:class="clazzObj">
						Name
					</div>	
					<div v-bind:class="cssClazz">
						Name
					</div>					
				</div>
			</div>			
		</div>
		<script>
			new Vue({
					el: "#appVue",
					data: {
						cssClazz:'style1',
						clazzObj:{
							'style0':true
						},
						colorVar:'green',
						fontVar:25,
						isBind:true,
						dataStyle0:{
							'color':'red',
							'font-size':'30px'
						},
						dataStyle1:{
							fontWeight:'bold'
						}
					}
				}

			)
		</script>
	</body>
</html>


REF:

http://www.runoob.com/vue2/vue-class-style.html

    https://cn.vuejs.org/v2/guide/class-and-style.html

llzkkk12
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue第一天笔记05——v-bind
lqh的博客
08-17 172
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
Vue指令中的v-bind之动态更改样式
cattleya_ada的博客
09-29 4023
{{}}不能在html属性中使用，我们要采用v-bind绑定属性。 语法：v-bind:属性名，可以简写为:属性名 每个绑定，都只能包含单个表达式。代码如下： &lt;style&gt; .yuan{ width: 100px; height: 100px; border-radius: 50%; background...
二、 插值
weixin_43374578的博客
02-02 203
1 .列表展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表展示</title> </head> <body> <div id="list"> <!--在页面控制...
vue的style方式绑定行内样式-background-image的方式等
沧笙踏歌的博客
02-26 5127
转自：https://blog.csdn.net/qq_34664239/article/details/79106570 <tr v-for="(item,index) in dataObj"> <td class="video-msg" v-bind:id="item.videoid"> <div class="videoImg fl" v-bind...
Vue中Class和Style几种v-bind绑定的用法-详解案例_vue style使用v-bind
最新发布
2401_84413092的博客
04-29 486
渲染结果与上面相同除此之外，我们还可以使用计算属性去绑定元素的 class。
vue绑定样式的三种方法
weixin_42064877的博客
06-12 736
vue绑定样式的三种方法
Vue v-bind动态绑定class实例方法
10-15
在Vue中，`v-bind`指令是用于动态地绑定属性到元素。在这个特定的场景中，我们关注的是如何使用`v-bind`来动态绑定`class`，这是一个非常实用的功能，允许我们在运行时根据数据的变化改变元素的CSS类。 动态绑定`...
详解vue中v-bind:style效果的自定义指令
10-15
在Vue中，`v-bind:style` 是一个用于动态绑定CSS样式的指令，它可以接受对象或字符串，方便地根据数据变化更新元素的样式。而自定义指令则是Vue提供的一种扩展机制，允许开发者自定义DOM操作。 1. **自定义指令**：...
一文读懂vue动态属性数据绑定（v-bind指令）
10-15
`v-bind` 指令是 Vue 中用于动态绑定元素属性的一个关键特性。本文将详细介绍 `v-bind` 的使用，包括基本用法、绑定 class 属性以及数组语法。 1. `v-bind` 基本用法： 在 Vue 中，`v-bind` 用于动态地将数据模型...
Vue条件循环判断+计算属性+绑定样式v-bind的实例
10-18
绑定样式`v-bind`允许动态地绑定CSS样式。例如，你可以根据某些条件改变元素的颜色或大小。虽然在提供的内容中没有直接示例，但使用`v-bind:class`或`v-bind:style`是常见的做法，它们使得样式可以根据组件的状态...
详解VUE中v-bind的基本用法
08-29
在 Vue 中，v-bind 是一个非常重要的指令，它用于将数据绑定到 HTML 元素的属性上。本篇文章将详细介绍 v-bind 的基本用法，包括 v-bind:class 和 v-bind:style 两个方面。 v-bind:class v-bind:class 用于动态地...
Vue｜样式绑定
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
03-21 1716
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
绑定vue样式的5种方法
web前端开发博客
04-08 2353
vue是三大前端框架之一，深受着前端开发人员的喜欢，特别感谢尤大大啊，向大神致敬下，哈哈哈！不扯了，回归正题。本文总结的是vue的样式绑定方式，每种方式都有对应的例子给你看，让你一看就懂，希望对你学习vue的样式绑定有所帮助。 第1种使用方式： 传递一个数组，组值写类名就行了，但class 需要使用v-bind（简写为“:”）做数据绑定，请看下 面的例子你就懂了： <h3 :cl...
vue——如何给v-for循环出来的元素设置不同的样式
热门推荐
weixin_44613294的博客
01-23 1万+
例如给循环出来的四个盒子设置不同的背景色 第一步：给要循环的盒子动态绑定class名 并且传入一个数组 &amp;lt;div v-for=&quot;(i,a) in serve&quot; class=&quot;sever_box2&quot;&amp;gt; &amp;lt;div :class=&quot;sstt[a]&quot;&amp;gt; &a
vue中的几种样式绑定的方法
老衲的少女心i~
06-16 780
vue中几种常见的样式绑定方法总结
Vue_样式绑定
大脸猫~
06-29 467
1.v-bind：class=‘{activitded:isActivitded} ’ class的对象绑定 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;如果是是一个对象，{red:’isRed’} key 是class的名字，value是是否有这个class 变量是一个布尔值 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp
vue样式绑定
sxy705242410的博客
12-25 215
VUE样式绑定1. v-bind:class设置一个对象，动态切换class2. :class可以和class共存3. :class可以绑定数据中的对象4. 三元表达式5.v-bind:class设置一个数组6.数组语法中使用对象语法7.定义一个数组通过不同索引值获取不同样式8. 绑定内联样式 1. v-bind:class设置一个对象，动态切换class <div :class="{'active':isActive}">xxx</div> //样式是否起作用，根据isActiv
v-on、v-bind、v-for的demo
qq_35515563的博客
05-07 168
v-on <!DOCTYPE html> <html> <head> <title></title> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:"#my", ...
vue v-bind指令
05-13
`v-bind` 是 Vue.js 中用来绑定数据到 HTML 元素属性的一个指令。 它的语法是 `v-bind:属性名="表达式"` 或者简写为 `:属性名="表达式"`，其中 `属性名` 是 HTML 元素的一个属性名，`表达式` 是一个 JavaScript ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值