一、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); // 打印出: trueif(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>

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

简单介绍Vue之vue.$set()方法源码案例
这篇文章主要介绍了Vue之vue.$set()方法源码案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下在使用vue开发项目的过程中,经常会遇到这样 ...
java增删改查实例源码_Spring Data JPA 实现简单的CRUD增删改查源码案例
Spring专题 Spring Data JPA 实现简单的CRUD增删改查源码案例 Spring Data JPA旨在简化JPA基础知识库构建和减少需要与数据库进行通信的代码量.第一部分是如何配置H ...
CSS样式之块元素行内元素
一,常见的块元素块元素: 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常用于网页布局和网页结构的搭建. 常见的块元素有 h1~h6.p.div.ul.ol .li等 ...
java中jooq,在Spring中使用jOOQ源码案例
Spring专题在Spring中使用jOOQ源码案例虽然ORM大部分性能问题是由开发者自己引起的,以只读方式使用ORM是不值得的,现在有一种其他可选方式,使用JOOQ,jOOQ从您的数据库生成Ja ...
Vue框架---Vue入门
Vue概述 Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 vue.js的核心特点-响应的数据绑定传统的js操作页面:在以前使用js操作页面的时候是这样的,需要操作某个html ...
基于SpringBoot+Vue在线考试系统【web端+小程序端】【附带源码】
最近和不少大佬聊天,有的技术很牛,有的赚很多,有的已经是高管,有的有自己的公司. 通过聊天,我发现成功人的优点基本相同: 能吃苦,执行力强,自律性强. 喝了不少酒后,酒后吐真言,成功的人都不容易,说这 ...
基于Vue的医院内部管理系统（医生、患者、挂号、药房）文档+答辩PPt+项目源码+演示视频
[摘要]随着大数据时代的发展,医院信息化作为医院运用信息技术及其产品的代表运用于流程管理和经营管理.而由于医院本身的性质决定,医院信息系统属于现存企业及信息系统中较为复杂的一类,不同类型用户可通过该系 ...
vue关于element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
交流qq群:672373393 前端项目公开在码云:https://gitee.com/xiao_yulong/noob-admin-ui 欢迎大家进群讨论! 辰小白小白最近在写日历模板,项目已经用了 ...
html行内样式修改,HTML的行内样式演示案例
在讲html的行内样式之前,首先跟大家说明一下什么叫做样式.所谓样式就是用来修饰网站页面的,使得页面更加好看有特效,从而提升用户的浏览体验.Html的样式主要分为三种形式,分别是今天咱们就将html ...

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

文章目录

一、Vue样式绑定

1.1 Vue绑定class样式

1.2 Vue绑定行内样式

1.2.1 对象控制绑定样式

1.2.2 数组控制绑定样式

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

1.4 v-if和v-show指令

1.5 v-if实现选项卡案例

1.6 购物车实例

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

最新文章

热门文章