Vue语法（2）

我爱学习1234

已于 2023-06-13 14:25:56 修改

阅读量228

点赞数

文章标签： vue.js 前端 javascript

于 2023-06-07 20:07:19 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46684391/article/details/131072262

版权

文章详细介绍了Vue.js中的样式绑定，包括class和style属性的动态绑定，以及数据绑定v-model的使用，包括修饰符lazy、number和trim。同时，文章讨论了条件渲染的v-if和v-show的区别，以及循环渲染v-for的实现，强调了它们在不同场景下的适用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 样式绑定

1.1 class属性绑定

语法 ==> v-bind:class

语法糖 ==> :class

可以通过改变元素的类名，来实现该元素的不同样式。以下案例写了三种不同的绑定class的语法：变量、对象、数组。

<style>
    .box1 {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
    }
    .hide {
        /* 隐藏元素 */
        display: none;
    }
</style>
<div id="app">
    {{test}}
    <div :class="a">box1</div>
    <hr>
    <button @click="hide_box2">点击隐藏box2</button>
    <div :class="b">box2</div>
    <hr>
    <button v-on:click="hide_box3">点击隐藏box3</button>
    <div :class="[c,'box1']">box3</div>
    </div>
<script>
    const app = {
        data() {
            return {
                test: "测试",
                a: 'box1',
                // 对象写法，通过布尔值，来决定是否修改类名，从而达到是否在页面中显示元素
                b: { 'box1': true, 'hide': false },
                flag: true,
                // 开关，为true时，就添加类名；
                c:'box1'
            }
        },
        methods: {
            hide_box2() {
                this.flag = !this.flag;
                if (this.flag) {
                    this.b.hide = false;
                } else {
                    this.b.hide = true;
                }
            },
            hide_box3() {
                this.flag = !this.flag;
                if (this.flag) {
                    this.c = 'box1';
                } else {
                    this.c = 'hide';
                }
            }
        },
    };
    Vue.createApp(app).mount('#app');
</script>

最终实现，点击隐藏按钮，隐藏响应的div盒子。box2中，始终存在的样式是.box，通过点击事件，来修改data中的b的hide的值，从而达到是否隐藏该元素。box3中同样的方式。

1.2 style属性绑定

语法 ==> v-bind:style

语法糖 ==> :style

注意：在:style = '变量名'，其中的变量名要满足css的写法，比如：

    <style>
        .box {
            width: 100px;
            height: 100px;
        }
    </style>
    <div id="app">
        <div class="box" :style="a">box</div>
    </div>
    <script>
        const app = {
            data() {
                return {
                    a: 'background-color:blue;color:red',
                }
            },
        };
        Vue.createApp(app).mount('#app');
    </script>

以上案例是变量的写法，其中data中的a的值为css写样式时候的字符串样子，上面代码实现结果如下：

对象写法，需要注意在style中写样式时，属性名满足驼峰命名法。比如说正常写行内css样式时，为 style="background-color : blue，而在vue框架内写style样式时不支持下划线格式，那前面修改盒子背景色应该写成 :style="{backroundColor : 'blue' }"。以下案例包含对象语法和数组语法：

    <style>
        .box {
            width: 100px;
            height: 100px;
        }
    </style>
    <div id="app">
        <div class="box" :style="a">box</div>
        <div class="box" :style="{display:b,backgroundColor:'brown'}">box2</div>
        <!-- 对象写法 -->
        <div class="box" :style="[{display:c},{color:'blueviolet'}]">box3</div>
    </div>
    <script>
        const app = {
            data() {
                return {
                    a: 'background-color:blue;color:red',
                    b: 'block',
                    // box3隐藏
                    c: 'none',
                }
            },
        };
        Vue.createApp(app).mount('#app');
    </script>

总结：

a. :style="对象" 或 :style="变量"，变量中保存对象==>对象的属性就是css的样式代码，属性值就是css样式的值；

b. :style={ color: '变量' } ==>变量保存的是样式的值

c. :style="数组"或者:style="变量"，变量保存一个数组 ==>数组中保存对象

2. 数据绑定——v-model

首先，我们需要弄清楚在vue框架中的响应式数据和双向绑定数据的概念。

响应式数据：只能由代码改变UI或者只能由UI改变代码

双向绑定数据：Vue的数据源变化，模板跟着改变；页面改变，数据源也会变化。用于用户交互

下面写一个案例来看看什么是响应式数据：

    <div id="app">
        <p>{{email}}</p>
        <input type="text">
        <!-- 点击按钮 获取输入框的内容 -->
        <button @click="fn1">getData</button>
        <button @click="fn2">setData</button>
        
    </div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    email:'123',
                }
            },
            methods:{
                fn1(){
                    console.log(this.email);
                },
                fn2() {
                    this.email = '改数据了';
                }
            }
        });
        app.mount('#app');
    </script>

上面案例中，点击getData按钮，控制台会打印email的值，也就是123；但当改变输入框里面的值时，页面中的p标签并没有改变内容，获取输入框内的数据时，仍然是123。这是因为在输入框中输入内容时，修改的是DOM元素中的input.value，但Vue中的data.email没有改变，所以获取到的数据只能是原始数据123。想要实现当输入不同的内容时，会更改data中的email的值。那就需要实现数据的双向绑定。

运行结果：

1. 语法：v-model = "变量"

2. 修饰符

案例：

    <div id="app">
        <p>{{account}}</p>
        <input type="text" :value="account" v-model="account">
        <br>
        <p>lazy{{email}}</p>
        <input type="text" :value="email" v-model.lazy="email">
        <br>
        <p>number:{{tel}}</p>
        <input type="text" :value="tel" v-model.lazy.number="tel">
        <br>
        <p>去掉前后导空格{{nickname}}</p>
        <input type="text" :value="nickname" v-model.lazy.trim="nickname">
    </div>
    <script>
        const app = {
            data() {
                return {
                    account: '',
                    email: '',
                    tel: '',
                    nickname: '',
                }
            },
        };
        Vue.createApp(app).mount('#app');
    </script>

1. .lazy 等用户输入完再读取数，底层是change事件（触发条件：光标失焦、输入框内容改变）

2. .number 输入框内容以数字开头时，从非数字开始的字符会被去掉；当以非数字开头时，绑定的数据就是输入框中的内容。实际使用中，可以用来去掉带有单位的数据，方便验证

3. .trim 去掉输入框前后导空格。可以用来用户交互时的数据验证

总结：页面被用户交互了（提交表单），用修改了文档树的节点属性值，本来是不会刷新数据源，想办法数据源。方法：1. 自己绑定交互事件，获取交互结果设置到数据源中 2. v-model是方法1设计的语法糖。

3. 条件渲染——v-if&v-show

3.1 v-if

方法类似js语法中的if{ }else{ }

用法如下：

        <button :onclick="fn">btn</button>
        <div v-if="a">内容1</div>
        <div v-else-if="b">内容3</div>
        <div v-else>内容2222</div>
        <div>固定的</div>

vue中data代码：

 data() {
     return {
              a: true,
              b: false,
              a2: true,
            }
        },
methods: {
        fn() {
            this.a = !this.a;
            // this.b = !this.b;
        },
    }

点击btn按钮，当a为true时，显示内容1；如果为false，则去判断b，b为true就显示内容3，反之显示内容222。

3.2 v-show="变量"

当变量为true时，就显示该元素。其底层原理是创建了元素节点，当要显示时就删掉 display:none；如果不显示元素，则在该元素上添加上display:none

总结：v-if & v-show的区别？

v-if: 创建或销毁元素节点

v-show: 元素节点隐藏或显示，元素节点还在

两者的选择需要根据使用场景。当高频切换时，使用v-show，具有更高的渲染消耗；反之，使用v-if。

4. 循环渲染——v-for

v-for指令所在区块会被克隆，数组有几个元素就克隆几次。vue2 x版本克隆的是区块；vue3的旧版本克隆的是已经创建了的节点树；vue3新版本解决了前面的bug，克隆的是区块（v-for所在模模板）。用法如下：

<div v-for="el in arr4">
      <div class="box1" v-if="el.age>=18">
          <h3>姓名：{{el.name}}</h3>
          <span>年龄：{{el.age}}岁</span>
      </div>
</div>

<script>
    const app = Vue.createApp({
       data() {
             return {
                  arr4: [{ name: 'jjj', age: 13 },
                         { name: 'ccc', age: 23 },
                         { name: 'mmm', age: 15 },
                         { name: 'www', age: 55 },]
                }
            },
        });
    app.mount('#app');
</script>

页面显示如下，其中还筛选了年龄大于18岁的人员信息，也就是v-for和v-if连用。

注意：v-if和v-for不建议写在同一元素上。当必须要这么做来实现功能的话，可以使用Vue中的<template></template >标签，将你要使用v-if和v-for的元素包裹起来，它就是一个不起作用的包装器元素，不会创建DOM节点，如下的用法：

<template>
    <span v-for="el in arr5">{{ el }}</span>
</template >

key的意义：1. 更高效地渲染页面（响应式数据）

2. 让数据和节点关联，当刷新数据时，使两者不错位