【Vue框架】Vue绑定样式及案例之行内样式——对象绑定样式与数组控制样式（附带源码案例)

最新推荐文章于 2023-06-06 19:26:29 发布
最新推荐文章于 2023-06-06 19:26:29 发布
阅读量820 收藏 3
点赞数 1
分类专栏： NodeJs 文章标签： vue.js javascript 前端 样式 Vue2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43529465/article/details/129806138
版权

文章目录

一、Vue样式绑定

1.1 Vue绑定class样式

Vue通过v-bind动态样式绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a1{color: red;}
		.a2{font-size: 50px;}
		.a3{background: #dbdbdb;}
    </style>
</head>

<body>
    <div id="app" v-cloak>
		<h1 class="a1 a2 a3">
			Hello Vue
		</h1>

		<div :class= "{a1:true, a2:true, a3:istrue}">
			<h1> Hello Vue </h1>
		</div>
		
		<h1 :class= "['a1','a2','a3']">
			Hello Vue
		</h1>
	</div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                istrue:true,
            }

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

1.2 Vue绑定行内样式

1.2.1 对象控制绑定样式

  • 行内动态样式
    • 1、动态style样式属性需要加引号,否则变为变量
    • 2、属性名称不能包含“-”,需要将中间首字母变为大写 如: font-size => fontSize

1.2.2 数组控制绑定样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a1{color: red;}
		.a2{font-size: 50px;}
		.a3{background: #dbdbdb;}
    </style>
</head>

<body>
    <div id="app">
		<!--
			对象控制绑定样式
			行内动态样式:
			1.动态style样式属性需要加引号,否则变为变量
			2.属性名称不能包含“-”,需要将中间首字母变为大写 如:font-size => fontSize
		 -->
		<h1 :style="{color:'red', fontSize:'50px'}">
			Hello Vue
		</h1>
		
		<!-- 数组控制绑定样式 -->
		<h2 :style="[redColor, fSize]">
			Hello Vue
		</h2>
		
	</div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                istrue:true,
				redColor:{
					color:'red'
				},
				fSize:{
					fontSize:'60px'
				}
            }
        })
    </script>

</body>
</html>

1.3 Vue绑定样式案例(标题排他)

<!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>Document</title>
    <style>
        .redColor{color: red;}
    </style>
</head>

<body>
    <div id="app">
		<span :class="{redColor:isRed==0}" @click="f1(0)">首页</span>
		<span :class="{redColor:isRed==1}" @click="f1(1)">新闻中心</span>
		<span :class="{redColor:isRed==2}" @click="f1(2)">产品中心</span>
	</div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isRed:1
            },
			methods:{
				f1(i){
					console.log(i);
					this.isRed = i;
				}
			},

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

1.4 v-if和v-show指令

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a1{color: red;}
		.a2{font-size: 50px;}
		.a3{background: #dbdbdb;}
    </style>
</head>

<body>
    <div id="app" v-cloak>
		<h1 v-if="flag">Hello Vue</h1>
		<h1 v-show="flag">Hello Vue</h1>
		<button @click="toggle">点击</button>
		
		<h1 v-if="type=='A'">A</h1>
		<h1 v-else-if="type=='B'">B</h1>
		<h1 v-else>其他元素</h1>
	</div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag:true,
				type:'C'
            },
			methods:{
				toggle(){
					this.flag = !this.flag;
				}
			}
        })
    </script>
</body>
</html>

1.5 v-if实现选项卡案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .redColor{color:red;}
    </style>
</head>

<body>
    <div id="app">
		<span :class="{redColor:active==0}" @click="btn(0)">登录</span>
		<span :class="{redColor:active==1}" @click="btn(1)">注册</span>
		<div v-if="active==0">登录内容</div>
		<div v-if="active==1">注册内容</div>
	</div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                active:1
            },
			methods:{
				btn(i){
					this.active = i;
				}
			}
        })
    </script>
</body>
</html>

1.6 购物车实例

在这里插入图片描述在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			body{margin: 0px; padding: 0px;}
			#app{width: 100%; max-width: 750px; margin: 0 auto; overflow: hidden; }
			.top{width: 100%; max-width: 750px; height: 50px; background: #0094ff; color: white;display: flex; align-items: center;justify-content: center;}
			img{width: 100px;}
			table tr td{border-bottom: 1px solid #dbdbdb; text-align: center;}
			.t1{width: 30px; text-align: center;}
			.footer{width: 100%; max-width: 750px; height: 50px;background: #0094ff; color: white;position: fixed; bottom: 0; line-height: 50px;}
			.footer i{font-style: normal; padding-left: 50px; }
		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<div class="top">购物车</div>
			
			<table width="100%" cellpadding="5" cellspacing="0">
				<tr v-for="(item,i) in cartList" :key="i">
					<td v-if="item.check"><input type="checkbox" checked @click="checkBtn(i)"/></td>
					<td v-else ><input type="checkbox" @click="checkBtn(i)" /></td>
					<td><img :src="item.imgUrl"/></td>
					<td>名称:{{item.title}}<br/>价格:{{item.price}}</td>
					<td><button @click="btnSub(i)">-</button><input type="text" class="t1" :value="item.num"/><button @click="btnAdd(i)">+</button></td>
				</tr>
			</table>
			
			<div class="footer">
				<em v-if="allCheck == cartList.length" ><input type="checkbox" checked @click="allBtn" />全选</em>
				<em v-else ><input type="checkbox" @click="allBtn" />全选</em>
				
				<i>总数量:{{allNum}}</i>
				<i>总价格:{{allPrice}}</i>
			</div>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					//记录选中的总条数
					allCheck:0,
					// 获取产品总价格
					allPrice:0,
					//选中的总数量
					allNum:0,
					
					msg:'Hello World',
					cartList:[
						{id:1,imgUrl:"../images/p1.jpg",title:'瓜子',price:20,num:1,check:false},
						{id:2,imgUrl:"../images/p1.jpg",title:'花生',price:30,num:1,check:false},
						{id:3,imgUrl:"../images/p1.jpg",title:'西瓜子',price:40,num:1,check:false},
						
					]
				},
				methods:{
					// 数量加减功能
					btnSub(i){
						if(this.cartList[i].num < 1){
							return
						}
						this.cartList[i].num -= 1;
						this.getAllPrice();
						this.getAllNum();
					},
					btnAdd(i){
						if(this.cartList[i].num == 5){
							return
						}
						this.cartList[i].num += 1;
						this.getAllPrice();
						this.getAllNum();
					},
					
					// 底部全选功能
					allBtn(e){
						console.log(e.target);         // 打印出: <input type="checkbox"/>
						console.log(e.target.checked); // 打印出: true
						if(e.target.checked){
							for(var i=0; i<this.cartList.length; i++){
								this.cartList[i].check = true;
							}
						}else{
							for(var i=0; i<this.cartList.length; i++){
								this.cartList[i].check = false;
							}
						}
						this.getAllPrice();
						this.getAllNum();
					},
					
					// 判断是否全选
					getAllCheck(){
						var num = 0;
						for(var i=0; i<this.cartList.length; i++){
							if(this.cartList[i].check){
								num ++;
							}
						}
						this.allCheck = num;
					},
					
					//0.获取产品总价格
					getAllPrice(){
						var num = 0;
						for(var i=0; i<this.cartList.length; i++){
							if(this.cartList[i].check){
								num += parseInt(this.cartList[i].num) * parseInt(this.cartList[i].price);
							}
						}
						this.allPrice = num;
					},
					
					//1.获取选中总数量
					getAllNum(){
						var num  = 0;
						for(var i=0; i<this.cartList.length; i++){
							if(this.cartList[i].check){
								num += parseInt(this.cartList[i].num);
							}
						}
						this.allNum =num;
					},
					
					//2.修改产品的选中状态
					checkBtn(i){
						console.log(this.cartList[i]);
						this.cartList[i].check = !this.cartList[i].check;
						
						// 获取总数量
						this.getAllNum();
						// 获取总价格
						this.getAllPrice();
						// 获取选中个数
						this.getAllCheck();
					},
				}

			})
		</script>
	</body>
</html>
量化Mike
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue 框架之动态绑定 css 样式实例分析
12-10
今天的小实例是关于 Vue 框架动态绑定 css 样式，这也是非常常用的一个部分 首先说一下 动态绑定，相对的大家都知道静态绑定，静态绑定的话，直接加 class=“”就可以了，使用 Vue 呢之前也介绍过一个 v-bing:class=...
vue中书写行内的样式
最爱喝怡宝的博客
11-10 1万+
<div id="app"> <!-- <h1 style="color: plum; font-size: 10px;">我是一个成熟的h1</h1> --> <!-- 第一种方法 --> <h1 :style="{color:'red',fontSize:'10px'}">我是一个成熟的h1</h1> <!-- 第二种方法 --> ..
vue 行内样式写法总结
cx18333的博客
04-25 1058
本文总结了,vue中行内样式常用写法
Vue 09Vue中使用行内样式---class
mqingo的博客
01-02 2706
09Vue中使用样式---class.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;09Vue中使用样式----class&lt;/title&gt; &lt;script type="text/javascript
在vue中怎么写行内样式高_13.VUE学习之控制行内样式
weixin_33340674的博客
12-28 2488
vue测试一测试二 测试三 var app = new Vue({el: "#vue",data:{red:"red",size:28,div2:{color:'red',background:'yellow',width:'30%'}}});效果:黑马vue---17、vue中通过属性绑定绑定style行内样式黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结...
vue 中 class-style绑定行内样式
MISS_zhang_0110的博客
08-04 595
不能作为变量名，-可以作为属性名和类名。
Vue中通过属性绑定为元素绑定style行内样式的实例代码
10-15
当涉及到CSS样式时，Vue提供了一种便捷的方式来动态地设置元素的行内样式，即通过`:style`绑定。这种方式使我们可以根据组件的状态来改变元素的外观，实现更灵活的样式控制。 1. **直接在元素上使用`:style`绑定...
Vue.js每天必学之Class与样式绑定
10-21
Vue.js 是一款流行的前端框架，它的核心特性之一是数据绑定，其中包括对HTML元素Class和样式的动态绑定。在本文中，我们将深入探讨Vue.js中如何处理Class与样式绑定。 首先，我们来了解一下如何绑定HTML Class。Vue...
vue绑定class与行间样式style详解
08-29
Vue 绑定 Class 与行间样式 Style 详解 Vue 是一个流行的前端框架，提供了强大的绑定机制来控制 HTML 元素的样式。今天，我们将详细介绍 Vue 绑定 Class 与行间样式 Style 的相关知识点。 绑定 Class 在 Vue 中，...
在Vue中使用样式
weixin_39111384的博客
04-19 491
一、vue中通过属性绑定为元素设置class样式 <!--方式一：直接传递一个数组,class要用v-bind做数据绑定--> <!--<h2 :class="['thin','italic']">{{ msg }}</h2>--> <!--方式二:三元表达式--> <!--<h2 :class="['red',...
在vue中怎么写行内样式高_vue绑定class与行间样式style详解
weixin_39790686的博客
12-18 700
一、绑定class属性的方式1、通过数组的方式，为元素绑定多个class.red {color:red;/*color:#ff8800;*/}.bg {background: #000;/*background: green;*/}window.onload = function(){var c = new Vue({el : '#box',data : {red_color : 'red',bg...
vue的style方式绑定行内样式-background-image的方式等~
棠樾的博客
10-20 4014
需求：图片是通过接口获取可以配置，同时图片要自适应容器的大小，这时的解决方法是设置图片为背景图并居中排布。 <view class="giftImg" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }"></view> 行内样式的写法可以使用数组语法也可以使用对象语法： 1.数组语法： // :style 的数组语法可以将多个样式对象应用到同一个元素上： data: { baseStyl..
Vue样式绑定
LTQQN的博客
06-06 242
在此案例中，样式绑定1的样式来自style中的style1，因为在return返回值中将istrue设置为true，则style1中的样式是可以显示在页面中，若将istrue设置为false，则style1中的样式不会显示在页面中；在本例中，我们给“得到”和“修改”分别添加了点击事件，点击“得到”，则输入框中的内容会给到页面中显示，若点击“修改”，则页面中和输入框中都会显示“我给你改了-email”；.lazy：也是给表单元素添加事件监听，可以在点击“得到”时，可以将输入框中的数字传给页面中；
vue动态控制样式
ct5211314的博客
03-29 1670
在Vue项目开发中往往需要通过某个变量来控制页面样式的展示，根据变量显示不同的样式，以此来表状态以及用户的操作等。下面我们一起整理下通过变量控制样式的语法表达式。
Vue的样式绑定
qq_46149597的博客
11-03 2868
Vue的样式绑定有v-bind:class、v-bind:style,分为内联绑定、非内联绑定、计算属性绑定、数组语法绑定
在vue中怎么写行内样式高_说说在 Vue.js 中如何绑定样式（class 或 style）
weixin_39520393的博客
12-18 628
在数据绑定中，最常见就是动态绑定元素的 class 或内联样式 style 咯，它们也是 HTML 的属性，所以可以使用 v-bind 指令 。1 绑定 class1.1 对象语法使用 v-bind:class 属性，实现动态切换 class。html：看得见我嘛js：var app = new Vue({el: '#app',data: {isHidden:true}});输出结果：看得见我嘛注...
Vue动态样式方法总结
热门推荐
Allen_Sushi首页
09-14 3万+
Vue动态页面
vue中动态绑定行内样式style的backgroundImage
lu2925028830的博客
04-18 2973
vue中动态绑定行内样式之backgroundImage
在vue中怎么写行内样式高_Vue中通过属性绑定为元素绑定style行内样式
weixin_39809168的博客
12-18 1107
1.直接在元素上通过:style的形式，书写样式对象这是一个H12.将样式对象定义在data中，并直接引用到:style中1:在data上定义样式data:{styleObj1:{color:"blue","font-weight":200,"font-size":"40px"},}2:在元素中，通过属性绑定的形式，将样式对象应用到元素中这是一个H13.在:style中通过数组，引用多个data上...
vue2行内样式绑定
最新发布
07-28
Vue.js 2 提供了 `v-bind` 或简写的冒号 `:` 来实现行内样式绑定。你可以通过绑定一个对象来设置行内样式。以下是一个示例： ```html <div :style="customStyle">Hello, Vue! export default { data() { ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值