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

最新推荐文章于 2023-11-05 19:00:00 发布
最新推荐文章于 2023-11-05 19:00:00 发布
阅读量822 收藏 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 09Vue中使用行内样式---class
mqingo的博客
01-02 2707
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中怎么写行内样式高_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中怎么写行内样式高_说说在 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中动态绑定行内样式style的backgroundImage
lu2925028830的博客
04-18 2994
vue中动态绑定行内样式之backgroundImage
Vue2（三）：绑定样式、条件渲染、列表渲染、列表过滤、列表排序
最新发布
Kiwi23333的博客
11-05 320
这个案例再次体现出计算属性的强大之处，只要get里用到的数据（keyword，sortType）发生改变，get都会重新执行，模板都会重新解析，这个业务逻辑就实现了。2、语法：v-for=“(item, index) in xxx” :key=“yyy”，其中xxx是遍历的目标，yyy是唯一的索引，用于区分每个嘎达。（2）旧虚拟DOM中未找到与新虚拟DOM相同的key，创建新的真实DOM，随后渲染到到页面。数组写法适用于：要绑定多个样式，但是不确定绑定哪几个，就写成数组，省的一个一个绑定。
Vue 框架之动态绑定 css 样式实例分析
12-10
今天的小实例是关于 Vue 框架动态绑定 css 样式，这也是非常常用的一个部分 首先说一下 动态绑定，相对的大家都知道静态绑定，静态绑定的话，直接加 class=“”就可以了，使用 Vue 呢之前也介绍过一个 v-bing:class=...
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基础5之绑定样式、条件渲染、列表渲染与Vue检测数据改变的原理
qq_34306228的博客
11-23 282
v-for指令： 若在列表中同时存在输入框时会出现以下问题： 出现问题的原因是Vue在生成虚拟dom时候使用对比(diff)算法，下面是运行过程图： 就能得到正确结果，其运行过程如下所示： 面试题：Vue、React中的key有什么作用？ (key的内部原理）
Vue中通过属性绑定为元素绑定style行内样式
01-08
1.直接在元素上通过:style的形式，书写样式对象 这是一个H1 2.将样式对象定义在data中，并直接引用到:style中 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, } 2:在元素中，通过属性绑定的形式，将样式对象应用到元素中 这是一个H1 3.在:style中通过数组，引用多个data上的样式对象 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-
Vue｜样式绑定
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
03-21 1716
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。
Vue中的三种绑定方式
qq_72760247的博客
10-13 1887
Vue中的三种绑定方式
5.Vue - 绑定class样式、style样式
weixin_51351637的博客
08-31 5968
绑定样式1.class样式写法：class=“xxx” xxx可以使字符串、对象、数组字符串法：适用于类名不确定，要动态获取对象法：适用于要绑定多个样式，个数不确定，名字不确定，但要动态决定用不用数组法： 适用于要绑定多个样式，个数确定，名字确定，但不确定用不用2.style样式：style=“{fontSize：xxx}” 其中xxx是动态值：style="[a,b]" 其中ab是样式对象，如下。...
Vue中绑定样式
Machoul的博客
03-28 864
Vue中绑定样式 绑定class样式–单个样式 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> .basic{ width: 400px; height: 100px; border: 1px solid black; } .cl1{ background-color: red;
Class 与 Style 绑定内联样式(vue.js)
时光足迹
10-08 2701
v-bind:style 的对象语法十分直观——看着非常像 CSS，其实它是一个 JavaScript 对象。CSS 属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）： data: { styleObject: { color: 'red', fontSize: '13px' } }
vue 动态添加样式
热门推荐
liuxing393724034的博客
06-15 2万+
vue实现点击切换改变样式 html代码：根据数据动态循环一个列表 &lt;ul&gt; &lt;li class="box" v-for="(list,index) in dataList" :key="index" :class="{'bor':clicked==index}" @click="changeTab(index)"&gt;{{list}}&
Vue使用样式和内联样式
Scrow1204的博客
09-23 2832
注意： 1.Vue中使用样式，必须用v-on（缩写成:）绑定 2.在Js中，对象（无序键值对）的类名单引号可以省略，但是属性名中带有连字符等其他特殊字符要用引号隔开，推荐全部都用引号，属性名（键值）必须使用单引号隔开。所以都用单引号不会出错。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta cha...
vue2行内样式绑定
07-28
Vue.js 2 提供了 `v-bind` 或简写的冒号 `:` 来实现行内样式绑定。你可以通过绑定一个对象来设置行内样式。以下是一个示例： ```html <template> <div :style="customStyle">Hello, Vue!</div> </template> <script> export default { data() { return { customStyle: { color: 'red', fontSize: '16px' } }; } }; </script> ``` 在上面的示例中，我们将 `customStyle` 对象绑定到 `:style` 上。该对象包含了要应用的样式属性和值。你可以根据需要添加或修改样式属性。在这个例子中，我们设置了文本颜色为红色，并且字体大小为16像素。 希望这能帮到你！如果你还有其他问题，请随时问我。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值