vue属性与方法

vue属性与方法，计算属性，v-model指令——表单的实现，样式绑定

小易'

979人浏览 · 2024-03-30 17:30:37

小易' · 2024-03-30 17:30:37 发布

vue属性与方法

计算属性
v-model指令——表单的实现
样式绑定

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- 5.3 样式绑定 -->
    <style>
        .green{
            color: green;
        }

        .red{
            color: red;
        }

        .active{
            background-color: antiquewhite;
            color: #2154ae;
        }

        .align{
            text-align: right;
        }
    </style>
</head>
<body>
    <div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;">
        <h2>5.1 计算属性</h2>
        <!-- 当一个属性需要通过计算得到时可以使用计算属性 -->
        <!-- 一个值改变影响多个值，就采用监听属性，而多个值改变影响一个值就可以采用计算属性 -->
        <div id="app1">
            <p>我是:{{name}}</p>
            <p>我是:{{firstName + lastName}}</p>
            <p>我是:{{name1}}</p>
            <hr>
            <p>价格：{{price}}</p>
            <p>数量：<button @click="sub">-</button>
            <span>{{quatity}}</span>
            <button @click="add">+</button>
            </p>
            <p>折扣：{{discount}}</p>
            <p>总价：{{totalPrice}}</p>
        </div>

        <script>
            const sx = {
                data(){
                    return{
                        name: '不蒸馒头曾口气',
                        firstName: '不蒸馒头',
                        lastName: '曾口气',
                        price: 100,
                        quatity: 0,
                        discount: 0.5,
                        totalPrice: 0
                    }
                },
                computed: {
                    name1(){
                        return this.firstName + this.lastName;
                    },
                    // totalPrice(){
                    //     return this.price * this.quatity * this.discount;
                    // }
                },
                methods: {
                    sub(){
                        this.quatity--
                    },
                    add(){
                        this.quatity++
                    }
                },
                watch: {
                    quatity(val){
                        this.totalPrice = this.price * this.quatity * this.discount
                    }
                }
            }
            Vue.createApp(sx).mount('#app1')
        </script>
    </div>

    <div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;">
        <h2>5.2 v-model指令————表单的实现</h2>
        <div id="app2">
            <form action="">
                <div>
                    <label for="">用户名：</label>
                    <input type="text" v-model="formdata.username">
                </div>
                <div>
                    <label for="">密码：</label>
                    <input type="password" v-model="formdata.password">
                </div>
                <div>
                    <label for="">爱好：</label>
                    <select v-model="formdata.hobby">
                        <option value="basketball">篮球</option>
                        <option value="football">足球</option>
                        <option value="pingpong">乒乓球</option>
                    </select>
                </div>
                <div>
                    <label for="">性别：</label>
                    <label for="">男</label>
                    <input type="radio" value="男" v-model="formdata.sex">
                    <label for="">女</label>
                    <input type="radio" value="女" v-model="formdata.sex">
                </div>
                <div>
                    <label for="">特长：</label>
                    <label for="">计算机</label>
                    <input type="checkbox" v-model="formdata.forte">
                    <label for="">唱歌</label>
                    <input type="checkbox" v-model="formdata.forte">
                </div>
                <button>提交表单</button>
            </form>
        </div>
        <script>
            const bd = {
                data(){
                    return{
                        formdata:{
                            username: "",
                            password: "",
                            hobby: "",
                            sex: "",
                            forte: []
                        }
                    }
                }
            }
            Vue.createApp(bd).mount('#app2')
        </script>
    </div>

    <div style="border: 1px solid #949494;padding: 20px;margin-top: 10px;">
        <h2>5.3 样式绑定</h2>
        <div id="app3">
            <p :class="c1" @click='c1="red"'>青青草原</p>
            <p :class="{active:ac,align:ac}" @click="ac=!ac">对象语法绑定，样式绑定的是一组对象</p>
        </div>
        <script>
            let ysbd ={
                data(){
                    return{
                        c1: 'green',
                        ac: false,
                    }
                }
            }
            Vue.createApp(ysbd).mount("#app3")
        </script>
    </div>

</body>
</html>

效果图

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^