v-bind对于样式控制的增强--操作style
语法： :style = “样式对象”
适用于某个具体属性的动态设置
<div class="box" :style="{css属性名1:css属性值,css属性名2:css属性值}"></div>
<!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>.box {width: 500px;height: 30px;border-radius: 50px;border: 1px solid #000;}.inner {width: 25%;height: 28px;border-radius: 50px;border: 1px solid #000;background-color: orangered;/*相对定位*/position: relative;/*动画*/transition: all 1s;}span {/*绝对定位*/position: absolute;right: -20px;bottom: -25px;}button {margin: 50px 20px;width: 80px;height: 30px;}</style>
</head><body><div id="app"><div class="box"><div class="inner" :style="{width:percent + '%'}"> <!-- 动态修改percent可以修改width的宽度比例达到进度条的效果 --><span>{{percent}}%</span></div></div><button @click="percent = 25">设置25%</button><button @click="percent = 50">设置50%</button><button @click="percent = 75">设置75%</button><button @click="percent = 100">设置100%</button></div><!-- 引入是开发版本的包 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {percent: 25},methods: {},})</script>
</body></html>
