Vue2从基础到实战（v-bind对于样式控制的增强-操作style，v-model在其他表单元素的使用）

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>

效果展示：