v-bind对于样式控制的增强-操作style
语法:style="样式对象"
<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>
代码解析:
-
HTML结构:
- 包含了一个
div
元素,其id
为app
,这是Vue实例绑定的目标。 - 在
div
内部,有一个表示进度条的div
,其中的.inner
子元素显示进度。 - 四个按钮用于设置进度条的百分比。
- 包含了一个
-
CSS样式:
.progress
类定义了进度条的外观,包括宽度、背景色、边框和圆角。.inner
类定义了内部进度条的高度、背景色和文本居中样式。
-
JavaScript:
- 引入了Vue.js库。
- 创建了一个Vue实例,绑定到
id
为app
的元素。 data
属性包含一个percent
变量,表示进度百分比。methods
部分定义了一个setPercent
方法,用于设置percent
的值。
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Progress Bar</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.progress {
width: 100%;
background-color: #f3f3f3;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
}
.inner {
height: 20px;
background-color: #4caf50;
width: 0;
text-align: center;
color: white;
line-height: 20px; /* vertically center the text */
}
</style>
</head>
<body>
<div id="app">
<div class="progress">
<div class="inner" :style="{ width: percent + '%' }">
<span>{{ percent }}%</span>
</div>
</div>
<button @click="setPercent(25)">设置25%</button>
<button @click="setPercent(50)">设置50%</button>
<button @click="setPercent(75)">设置75%</button>
<button @click="setPercent(100)">设置100%</button>
</div>
<script>
const app = new Vue({
el: "#app",
data: {
percent: 0
},
methods: {
setPercent(value) {
this.percent = value;
}
}
});
</script>
</body>
</html>
实现效果:
点击下方按钮即可控制进度
v-model在其他表单元素的使用
- 输入框 input:text ——> value
- 文本域 textarea ——> value
- 复选框 input:checkbox ——> checked
- 单选框 input:radio ——> checked
- 下拉菜单 select ——> value
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Form Example</title>
</head>
<body>
<div id="app">
<input type="text" v-model="username" placeholder="Enter username">
<br><br>
<input type="checkbox" v-model="issingle"> 单身
<br><br>
<input v-model="gender" type="radio" name="gender" value="1"> 男
<input v-model="gender" type="radio" name="gender" value="2"> 女
<br><br>
<select v-model="cityid">
<option value="101">北京</option>
<option value="102">上海</option>
<option value="103">南京</option>
<option value="104">成都</option>
</select>
<br><br>
<textarea v-model="desc" placeholder="Enter description"></textarea>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
username: '',
issingle: false,
gender: "1",
cityid: '102',
desc: ''
}
});
</script>
</body>
</html>
效果展示: