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

news2024/11/25 8:44:55

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>

效果展示：