vs2010网站设计用整张图片做背景,餐饮管理系统下载,怎么开网站做站长,电子商务网站的功能文章目录 v-bind对样式控制的增强2.1 操作class2.1.1 语法2.1.2 对象语法2.1.3 数组语法2.1.4 使用2.1.5 Test 2.2 操作style2.2.1 语法2.2.2 使用2.2.3 Test v-bind对样式控制的增强
2.1 操作class
2.1.1 语法
div :class 对象/数组这是一个divdiv :class 对象/数组这是一个div/div2.1.2 对象语法
当class动态绑定的是对象时键就是类名值就是布尔值如果值是true就有这个类否则没有这个类
div classbox :class{ 类名1: 布尔值, 类名2: 布尔值 }/div适用场景一个类名来回切换
2.1.3 数组语法
当class动态绑定的是数组时 → 数组中所有的类都会添加到盒子上本质就是一个 class 列表
div classbox :class[ 类名1, 类名2, 类名3 ]/divdiv classbox :class[ 类名1, 类名2, 类名3 ]/div使用场景:批量添加或删除类
2.1.4 使用
style.box {width: 50px;height: 50px;border: 1px solid #000;margin-top: 5px;}.red {background-color: red;}.big {width: 100px; height: 100px;}/style
/head
bodydiv idappdiv classbox :class{ big: true, red: true }你好Java/divdiv classbox :class[red, big]你好Java/div/divscript srcjs/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script
/body2.1.5 Test
style* {margin: 0;padding: 0;}ul {display: flex;border-bottom: 2px solid #1e3c9f;padding: 0 10px;}li {width: 100px;height: 50px;line-height: 50px;list-style: none;text-align: center;}li a {display: block;text-decoration: none;font-weight: bold;color: #333333;}li a.active {background-color: #12e06f;color: #fff;}/style
/head
bodydiv idappulli v-for(item ,index) in list :keyitem.id clickactiveIndex indexa href# :class{active: index activeIndex}{{item.name}}/a/li/ul/divscript srcjs/vue.js/scriptscriptconst app new Vue({el: #app,data: {activeIndex: 0, // 记录高亮list: [{id: 1,name: 商品秒杀}, {id: 2,name: 特价处理}, {id: 3,name: 品牌优惠}]}})/script
/body2.2 操作style
2.2.1 语法
:style中的css属性会覆盖 classbox的css样式
div classbox :style{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }/div2.2.2 使用
style.box {width: 50px;height: 50px;background-color: red;}/style
/headbodydiv idappdiv classbox :style{ width: 100px, height: 100px, backgroundColor: green }/div/divscript srcjs/vue.js/scriptscriptconst app new Vue({el: #app,data: {}})/script
/body2.2.3 Test style.progress {height: 25px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;}.inner {width: 50%;height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}.inner span {position: absolute;right: -20px;bottom: -25px;}/style
/headbodydiv idapp!-- 外层盒子底色 黑色 --div classprogress!-- 内层盒子 - 进度蓝色 --div classinner :style{ width: percent% }span{{ percent }}%/span/div/divbutton clickpercent 25设置25%/buttonbutton clickpercent 50设置50%/buttonbutton clickpercent 75设置75%/buttonbutton clickpercent 100设置100%/button/divscript srcjs/vue.js/scriptscriptconst app new Vue({el: #app,data: {percent: 30}})/script
/body
