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/[email protected]/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
percent: 25
},
methods: {
},
})
</script>
</body>
</html>