Vue学习笔记(三)

Jie2024-10-252024-11-28

Class 绑定

数据绑定的一个常见需求场景式操纵元素的 CSS class 列表，因为 class是 attribute,我们可以和其他 attribute 一样使用 v-bind将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class的 v-bind用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

绑定对象

isActive: true,
                hasError: false,
                classObject: {
                    'active': true,
                    'text-danger': true
                },
<p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定1</p>
    <p :class="classObject">Class样式绑定2</p>

绑定数组

1 2	<p :class="[arrActive,arrHasError]">Class样式绑定3</p> <p :class="[isActive ? 'active' : '',hasError ? 'text-danger' : '']">Class样式绑定4</p>

绑定对象和数组

Class样式绑定5

注意事项
数组和对象的嵌套过程中，只能数组嵌套对象，不能反其道而行

<script>
    export default {
        data() {
            return {
                isActive: true,
                hasError: false,
                classObject: {
                    'active': true,
                    'text-danger': true
                },
                arrActive: "active",
                arrHasError: "text-danger"
            }
        }
    }
</script>

<template>
    <p :class="{'active':isActive,'text-danger':hasError}">Class样式绑定1</p>
    <p :class="classObject">Class样式绑定2</p>
    <p :class="[arrActive,arrHasError]">Class样式绑定3</p>
    <p :class="[isActive ? 'active' : '',hasError ? 'text-danger' : '']">Class样式绑定4</p>
    <p :class="[{active:isActive},{'text-danger':hasError}]">Class样式绑定5</p>
</template>

<style>

    .active {
        /* color: red; */
        font-size: 30px;
    }
    .text-danger {
        color: red;
    }

</style>

20241025161104

style 绑定

数据绑定的一个常见场景是操纵元素的 CSS style 列表，因为 style是 attribute,我们可以和其他 attribute 一样使用 v-bind将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 style的 v-bind用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

绑定对象

<script>

    export default {
        data() {
            return {
                activeColor: 'green',
                size: 30,
                styleObject: {
                    color: 'red',
                    fontSize: '30px'
                }
            }
        }
    }
</script>

<template>
    <p :style="{color:activeColor,fontSize:size+'px'}">Style绑定1</p>
    <p :style="styleObject">Style绑定2</p>
</template>

绑定数组(了解)

1	<p :style="[styleObject]">Style绑定3</p>

侦听器

我们可以使用 watch选项在每次响应式属性发生变化时触发一个函数

<script>

    export default {
        data() {
            return {
                message: 'Hello Vue 3'
            }
        },
        methods: {
            updateHandle() {
                this.message = 'Hello World!'
            }
        },
        watch: {
            message(newValue, oldValue) {
                //数据发生变化时触发
                console.log(newValue, oldValue)
            }
        }
    }
</script>

<template>
    <h3>侦听器</h3>
    <p >{{ message }}</p>
    <button @click="updateHandle">修改数据</button>
</template>

侦听器函数名必须与 key 保持一致

表单输入绑定

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦，v-model指令帮我们简化了这一步骤。

文本框

<script>

    export default {
        data() {
            return {
                message: ""
            }
        }
    }
</script>

<template>
    <h3>表单输入绑定</h3>
    <form>
        <input type="text" v-model="message">
        <p>Message is: {{ message }}</p>
    </form>
</template>

复选框

<script>

    export default {
        data() {
            return {
                message: "",
                checked: false
            }
        }
    }
</script>

<template>
    <h3>表单输入绑定</h3>
    <form>
        <input type="text" v-model="message">
        <p>Message is: {{ message }}</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </form>
</template>