Vue3学习笔记（9.0）

最新推荐文章于 2024-07-10 22:11:08 发布
最新推荐文章于 2024-07-10 22:11:08 发布
阅读量402 收藏
点赞数 1
分类专栏： 前端 HTML5 Vue3 文章标签： 学习 html javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mez_Blog/article/details/129922393
版权
前端 同时被 3 个专栏收录
49 篇文章 0 订阅
订阅专栏
HTML5
32 篇文章 0 订阅
订阅专栏
Vue3
23 篇文章 0 订阅
订阅专栏

Vue3样式绑定

class与style是HTML元素的属性，用于设置元素的样式，我们可以用v-bind来设置样式属性。

v-bind在处理class和style时，表达式除了可以使用字符串外，还可以是对象或数组

v-bind:class可以简写为：class

class属性绑定

我们可以用v-bind:class设置一个对象，从而动态的切换class：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-03 15:02:46
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
        .active{
        width:100px;
        height:100px;
        background:blue;
    }
    </style>
   
</head>
<body>
    <div id="app">
        <!-- <p style = "font-size: 25px;">计数器：{{counter}}</p>
        <button @click="counter++" style="font-size: 25px;">点我</button> -->
        <!-- 千米：<input type="text" v-model="kilometers" @focus="currentlyActiveField='kilometers'">
        米：<input type="text" v-model="meters" @focus="currentlyActiveField='meters'"> -->
        <div :class="{'active':isActive}"></div>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app={
            data(){
                return{
                    // counter:1
                    // kilometers:0,
                    // meters:0
                    isActive:true
                }
            }
        }
        //     watch:{
        //         meters:function(newValue,oldValue){
        //             if(this.currentlyActiveField==='meters'){
        //                 this.kilometers=newValue/1000;
        //                 this.meters=newValue;
        //             }
        //         },
        //         kilometers:function(newValue,oldValue){
        //             if(this.currentlyActiveField==='kilometers'){
        //                 this.kilometers=newValue;
        //                 this.meters=newValue*1000;
        //             }
        //         }
        //     }
        // }

        Vue.createApp(app).mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>

 我们也可以在对象中传入更多属性用来动态切换多个class。

此外，:class指令也可以与普通的class属性共存。

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-03 15:10:21
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
        .active{
        /* width:100px;
        height:100px; */
        background:blue;
    }
    .static{
        width: 100px;
        height:100px
    }
    .text_danger{
        background: red;
    }
    </style>
   
</head>
<body>
    <div id="app">
        <!-- <p style = "font-size: 25px;">计数器：{{counter}}</p>
        <button @click="counter++" style="font-size: 25px;">点我</button> -->
        <!-- 千米：<input type="text" v-model="kilometers" @focus="currentlyActiveField='kilometers'">
        米：<input type="text" v-model="meters" @focus="currentlyActiveField='meters'"> -->
        <div class="static" :class="{'active':isActive,'text_danger':hasError}"></div>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app={
            data(){
                return{
                    // counter:1
                    // kilometers:0,
                    // meters:0
                    isActive:false,
                    hasError:true,
                }
            }
        }
        //     watch:{
        //         meters:function(newValue,oldValue){
        //             if(this.currentlyActiveField==='meters'){
        //                 this.kilometers=newValue/1000;
        //                 this.meters=newValue;
        //             }
        //         },
        //         kilometers:function(newValue,oldValue){
        //             if(this.currentlyActiveField==='kilometers'){
        //                 this.kilometers=newValue;
        //                 this.meters=newValue*1000;
        //             }
        //         }
        //     }
        // }

        Vue.createApp(app).mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>

当同时设置为TRUE的时候，后面的红色也会遮盖前面的颜色

这和前面写css的顺序有关，如果同时设置为TRUE，后写的css会遮盖先写的css属性

像这样，就会显示为蓝色

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-03 15:12:02
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
    .text_danger{
        background: red;
    }
        .active{
        /* width:100px;
        height:100px; */
        background:blue;
    }
    .static{
        width: 100px;
        height:100px
    }
    
    </style>
   
</head>
<body>
    <div id="app">
        <!-- <p style = "font-size: 25px;">计数器：{{counter}}</p>
        <button @click="counter++" style="font-size: 25px;">点我</button> -->
        <!-- 千米：<input type="text" v-model="kilometers" @focus="currentlyActiveField='kilometers'">
        米：<input type="text" v-model="meters" @focus="currentlyActiveField='meters'"> -->
        <div class="static" :class="{'text_danger':hasError,'active':isActive,}"></div>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app={
            data(){
                return{
                    // counter:1
                    // kilometers:0,
                    // meters:0
                    isActive:true,
                    hasError:true,
                }
            }
        }
        //     watch:{
        //         meters:function(newValue,oldValue){
        //             if(this.currentlyActiveField==='meters'){
        //                 this.kilometers=newValue/1000;
        //                 this.meters=newValue;
        //             }
        //         },
        //         kilometers:function(newValue,oldValue){
        //             if(this.currentlyActiveField==='kilometers'){
        //                 this.kilometers=newValue;
        //                 this.meters=newValue*1000;
        //             }
        //         }
        //     }
        // }

        Vue.createApp(app).mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>

 

 

 当isActive或者hasError变化时，class属性值也将相应的更新。例如，如果active的值为TRUE，class列表将变为“static active text-danger”。我们也可以直接绑定数据里的一个对象：

同时使用多个类，并存在多个相同属性时，不管是class，还是：class，都会显示最后那个重复属性的定义。

 

 此外，我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-03 15:25:38
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
    
        .active{
        /* width:100px;
        height:100px; */
        background:blue;
    }
    .static{
        width: 100px;
        height:100px;
        background:purple
    }
    .text_danger{
        background: red;
    }
    
    </style>
   
</head>
<body>
    <div id="app">
        <!-- <p style = "font-size: 25px;">计数器：{{counter}}</p>
        <button @click="counter++" style="font-size: 25px;">点我</button> -->
        <!-- 千米：<input type="text" v-model="kilometers" @focus="currentlyActiveField='kilometers'">
        米：<input type="text" v-model="meters" @focus="currentlyActiveField='meters'"> -->
        <div class="static" :class="classObject"></div>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app={
            data(){
                return{
                    // counter:1
                    // kilometers:0,
                    // meters:0
                    isActive:true,
                    hasError:true,
                    error:null
                }
            },
            computed:{
                classObject(){
                    return{
                        active:this.isActive && !this.error,
                        'text-danger':this.error&&this.error.type==='fatal'
                    }
                }
            }
        }
        //     watch:{
        //         meters:function(newValue,oldValue){
        //             if(this.currentlyActiveField==='meters'){
        //                 this.kilometers=newValue/1000;
        //                 this.meters=newValue;
        //             }
        //         },
        //         kilometers:function(newValue,oldValue){
        //             if(this.currentlyActiveField==='kilometers'){
        //                 this.kilometers=newValue;
        //                 this.meters=newValue*1000;
        //             }
        //         }
        //     }
        // }

        Vue.createApp(app).mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>

 数组语法

我们可以把一个数组传给v-bind:class。

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-03 15:30:13
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
    
        .active{
        /* width:100px;
        height:100px; */
        background:blue;
    }
    .static{
        width: 100px;
        height:100px;
        background:purple
    }
    .text_danger{
        background: red;
    }
    
    </style>
   
</head>
<body>
    <div id="app">
        <!-- <p style = "font-size: 25px;">计数器：{{counter}}</p>
        <button @click="counter++" style="font-size: 25px;">点我</button> -->
        <!-- 千米：<input type="text" v-model="kilometers" @focus="currentlyActiveField='kilometers'">
        米：<input type="text" v-model="meters" @focus="currentlyActiveField='meters'"> -->
        <div class="static" :class="[activeClass,errorClass]"></div>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app={
            data(){
                return{
                    // counter:1
                    // kilometers:0,
                    // meters:0
                    isActive:true,
                    hasError:true,
                    error:null,
                    activeClass:'active',
                    errorClass:'text_danger'
                }
            },
            computed:{
                classObject(){
                    return{
                        active:this.isActive && !this.error,
                        'text-danger':this.error&&this.error.type==='fatal'
                    }
                }
            }
        }
        //     watch:{
        //         meters:function(newValue,oldValue){
        //             if(this.currentlyActiveField==='meters'){
        //                 this.kilometers=newValue/1000;
        //                 this.meters=newValue;
        //             }
        //         },
        //         kilometers:function(newValue,oldValue){
        //             if(this.currentlyActiveField==='kilometers'){
        //                 this.kilometers=newValue;
        //                 this.meters=newValue*1000;
        //             }
        //         }
        //     }
        // }

        Vue.createApp(app).mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>

 我们还可以使用三元表达式来切换列表中的class：

同样的例子，不一样的配方，继续搞起

<!--
 * @Author: RealRoad1083425287@qq.com
 * @Date: 2023-04-02 19:41:53
 * @LastEditors: Mei
 * @LastEditTime: 2023-04-03 15:35:10
 * @FilePath: \vscode\Vue3_listen.html
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue_doc/vue.global3.js"></script>
    <style>
    .static{
        width: 100px;
        height:100px;
        background:purple
    }
    .active{
        /* width:100px;
        height:100px; */
        background:blue;
    }
    
    .text_danger{
        background: red;
    }
    
    </style>
   
</head>
<body>
    <div id="app">
        <!-- <p style = "font-size: 25px;">计数器：{{counter}}</p>
        <button @click="counter++" style="font-size: 25px;">点我</button> -->
        <!-- 千米：<input type="text" v-model="kilometers" @focus="currentlyActiveField='kilometers'">
        米：<input type="text" v-model="meters" @focus="currentlyActiveField='meters'"> -->
        <div class="static" :class="[isActive ? activeClass:errorClass]"></div>

    </div>

    <!-- <p id="info"></p> -->

    <script>
        const app={
            data(){
                return{
                    // counter:1
                    // kilometers:0,
                    // meters:0
                    isActive:true,
                    hasError:true,
                    error:null,
                    activeClass:'active',
                    errorClass:'text_danger'
                }
            },
            computed:{
                classObject(){
                    return{
                        active:this.isActive && !this.error,
                        'text-danger':this.error&&this.error.type==='fatal'
                    }
                }
            }
        }
        //     watch:{
        //         meters:function(newValue,oldValue){
        //             if(this.currentlyActiveField==='meters'){
        //                 this.kilometers=newValue/1000;
        //                 this.meters=newValue;
        //             }
        //         },
        //         kilometers:function(newValue,oldValue){
        //             if(this.currentlyActiveField==='kilometers'){
        //                 this.kilometers=newValue;
        //                 this.meters=newValue*1000;
        //             }
        //         }
        //     }
        // }

        Vue.createApp(app).mount('#app')
        // vm.$watch('kilometers',function(a,b){
        //     document.getElementById("info").innerHTML='数字变化，修改前的值是：'+b+'修改后的值是'+a+'!!!!!!'
        // })
    </script>
</body>
</html>

 

mez_Blog
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于SSM的云的学习笔记系统代码
04-16
云的学习笔记系统代码 java云的学习笔记系统代码 基于SSM的云的学习笔记系统代码 1、云的学习笔记系统的技术栈、环境、工具、软件： ① 系统环境:Windows/Mac ② 开发语言：Java ③ 框架：SSM ④ 架构:B/S、MVC ⑤ ...
云的学习笔记系统代码 java云的学习笔记系统代码
04-16
云的学习笔记系统代码 java云的学习笔记系统代码 基于SSM的云的学习笔记系统代码 1、云的学习笔记系统的技术栈、环境、工具、软件： ① 系统环境:Windows/Mac ② 开发语言：Java ③ 框架：SSM ④ 架构:B/S、MVC ⑤ ...
Vue3学习笔记（8.0）
mez_Blog的博客
04-03 244
异步数据的加载Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。我们可以通过watch来响应数据的变化。以下实例我们使用axios库。异步加载中使用watch。
VUE3 语法教程
qq_32907491的博客
07-23 589
刚开始学习 Vue，我们不推荐使用 vue-cli 命令行工具来创建项目，更简单的方式是直接在页面引入 vue.global.js 文件来测试学习。传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。一个简单的实例：createApp 的参数是根组件（HelloVueApp），在挂载应用时，该组件是渲染的起点。
Vue3 监听属性
大河之犬的博客
12-05 1136
Vue3 监听属性 `watch`，我们可以通过 `watch` 来响应数据的变化。
【vue3源码】十二、认识虚拟DOM
MAXLZ的博客
09-14 924
虚拟DOM（也可以称为vnode）描述了一个真实的DOM结构，它和真实DOM一样都是由很多节点组成的一个树形结构。
在用Vue实现点击切换active，并切换路由时遇到的问题
qq_57596347的博客
09-26 360
Vue点击切换active与切换路由
vue学习笔记
qq_43573853的博客
09-19 448
001 vue.js初体验 1.0 css {{message}} //{{}}相当于v-text vue能够识别 1.1 vue代码 var test=new Vue({ ​ el:’.test’,//里面包含了el属性 该属性决定了el挂载到那个元素上 ​ data:{ ​ message:‘hello vue.js’//给挂载的元素内部message赋值 ​ } ​ }) ​ test.message=‘hello vue.js 2’//可
7月8日学习笔记
weixin_70751701的博客
07-08 493
rw-------. 1 root root 1149 6月 15 03:31 jaspic-providers.xml。-rw-------. 1 root root 2313 6月 15 03:31 jaspic-providers.xsd。-rw-------. 1 root root 2756 6月 15 03:31 tomcat-users.xml。-rw-------. 1 root root 2558 6月 15 03:31 tomcat-users.xsd。
web前端研发实习--学习笔记（3）
qq_48026875的博客
10-16 309
万字让你们接触Javascript，入门学习
Lumos学习王佩丰Excel第四讲：排序与选择
最新发布
Sunshine_XX的博客
07-10 228
自定义排序演示：工资条拆分的演示：如果遇到很长的表，标题只存在于顶端，打印出来观感不好，可以这样做：有些版本的excel复制筛选数据容易把背后隐藏的所有数据都复制上去，这时可选中定位条件的“可见单元格”选项，复制粘贴即可。并排表示且，错排表示或。ctrl+shift+↓+→全选，演示说明：回头学原理，先记住一句话，要想筛选对，条件表头不要对。
Autoware.universe 高效学习第三章 -- 智驾技术务虚会之智驾技术栈讨论 其一
cy1641395022的博客
07-10 447
Autoware.universe 高效学习第三章 -- 智驾技术务虚会之智驾技术栈讨论 其一
css样式学习样例之边框
abments的博客
07-07 846
css样式学习样例之边框
学习小记-Netty
weixin_42029860的博客
07-06 235
Netty是由JBOSS个java开源框架，Netty提供异步的、事件驱动的网络应用程序框架，用以快速开发高性能、高可靠性的网络服务器和客户端程序。
【康复学习--LeetCode每日一题】3033. 修改矩阵
Puppet__的博客
07-05 356
给你一个下标从 0 开始、大小为 m x n 的整数矩阵 matrix ，新建一个下标从 0 开始、名为 answer 的矩阵。使 answer 与 matrix 相等，接着将其中每个值为 -1 的元素替换为所在列的 最大 元素。输入：matrix = [[1,2,-1],[4,-1,6],[7,8,9]]输出：[[1,2,9],[4,8,6],[7,8,9]]输入：matrix = [[3,-1],[5,2]]解释：上图显示了发生替换的元素（蓝色区域）。输出：[[3,2],[5,2]]
JMH320【亲测】【御剑九歌】唯美仙侠手游御剑九歌+WIN学习手工端+视频教程+开服清档+运营后台+授权GM物品充值后台
m0_71430218的博客
07-05 396
JMH320【亲测】【御剑九歌】唯美仙侠手游御剑九歌+WIN学习手工端+视频教程+开服清档+运营后台+授权GM物品充值后台
短链接学习day2
weixin_63374588的博客
07-05 896
需要注意的是，转换过程中，BeanUtil.toBean()方法通过反射机制创建了目标类型的实例，并将数据源对象的属性值复制到目标对象中。但是为了防止redis的主节点挂掉后，从节点变成主节点时，有些数据还没复制，就会导致脏数据，就会可能导致用户名重复，所以为了防止这个情况，我们需要将username设置为唯一索引，让数据库兜底。因为用户名不是特别重要的数据，如果说我设置用户名为 aaa，系统返回我不可用，那我大可以在 aaa 的基础上再加一个a，也就是 aaaa。一定要记得写枚举的时候是用逗号分割。
【安卓学习】文本切换器
m0_73241073的博客
07-08 597
文本切换器的使用
vue3学习笔记尚硅谷
08-12
在尚硅谷的Vue3学习笔记中，有几个与组件相关的内容。首先，在编写组件标签时，可以使用<school></school>标签。其次，可以在Vue组件中使用template来定义组件的结构和样式，也可以将组件的结构和样式...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mez_Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值