Vue——认识day06_class与style绑定

🕗 发布于 2024-09-01 23:35 vue.js 前端 javascript

在Vue中，可以使用v-bind指令来将CSS样式动态地绑定到HTML元素上。有两种方式可以实现CSS与style的绑定：

对象语法：可以将一个包含CSS属性和值的对象传递给v-bind，将对象的属性与HTML元素的style属性进行绑定。例如：

<div v-bind:style="{ color: textColor, fontSize: textSize + 'px' }">Hello World</div>

在上面的例子中，textColor和textSize是Vue实例的data属性，可以在Vue实例中定义和修改它们的值。当数据发生变化时，绑定的CSS样式也会相应地更新。

数组语法：可以将一个数组传递给v-bind，数组中的每个元素都是一个CSS样式对象。这样可以根据某个条件来动态地切换不同的CSS样式。例如：

<div v-bind:style="[baseStyle, activeStyle]">Hello World</div>

在上面的例子中，baseStyle和activeStyle是包含CSS属性和值的样式对象，可以在Vue实例中定义和修改它们的值。根据某个条件，可以动态地切换不同的样式。

通过v-bind指令，Vue可以实现将CSS样式动态地绑定到HTML元素上，从而可以根据数据的变化来改变样式。这种方式使得前端开发更加灵活和方便。

请看下面的代码示例——绑定class样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定样式</title>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
        .happy{
            border: 4px solid red;
            background-color: rgba(255,255,0,0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border: 4px solid black;
            background-color: rgba(0, 255, 68, 0.644);
        }
        .normal{
            border: 4px solid blue;
            background-color: rgba(0, 81, 255, 0.644);
        }
        .masoul1{
            background-color: yellowgreen;
        }
        .masoul2{
            font-size: 44px;
            text-shadow: 2px 2px 4px rebeccapurple,-2px -2px 4px skyblue;            
        }
        .masoul3{
            border-radius: 10px;
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body>

    <div id="root">
        <!-- 绑定class样式——字符串写法，适用于：样式的类名不确定，需要动态指定的 -->
        <!-- 采用:class作为动态的class来绑定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
        <br>
        <hr>
        <br>
        <!-- 绑定class样式——数组写法，适用于：要绑定的样式个数不确定名字也不确定 -->
        <div class="basic" :class="classArr" >{{name}}</div>

        <br>
        <hr>
        <br>

        <!-- 绑定class样式——对象写法，适用于：要绑定的样式个数确定,名字也确定,但要动态决定用不用的 -->
        <div class="basic" :class="classObj">{{name}}</div>
    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            name:'WenJGo',
            mood:'normal',
            classArr:['masoul1','masoul2','masoul3'],
            classObj:{
                masoul1:false,
                masoul2:false
            }
        },
        methods: {
            changeMood(){
                // this.mood = 'happy'
                const arr = ['happy','sad','normal']
                this.mood = arr[Math.floor(Math.random()*3)]
            }
        },
    });
</script>
</html>

请看下面的代码示例——绑定style样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定样式</title>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border: 1px solid black;
        }
        .happy{
            border: 4px solid red;
            background-color: rgba(255,255,0,0.644);
            background: linear-gradient(30deg,yellow,pink,orange,yellow);
        }
        .sad{
            border: 4px solid black;
            background-color: rgba(0, 255, 68, 0.644);
        }
        .normal{
            border: 4px solid blue;
            background-color: rgba(0, 81, 255, 0.644);
        }
        .masoul1{
            background-color: yellowgreen;
        }
        .masoul2{
            font-size: 44px;
            text-shadow: 2px 2px 4px rebeccapurple,-2px -2px 4px skyblue;            
        }
        .masoul3{
            border-radius: 10px;
        }
    </style>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
</head>
<body>

    <div id="root">
        <!-- 绑定class样式——字符串写法，适用于：样式的类名不确定，需要动态指定的 -->
        <!-- 采用:class作为动态的class来绑定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
        <br>
        <hr>
        <br>
        <!-- 绑定class样式——数组写法，适用于：要绑定的样式个数不确定名字也不确定 -->
        <div class="basic" :class="classArr" >{{name}}</div>

        <br>
        <hr>
        <br>

        <!-- 绑定class样式——对象写法，适用于：要绑定的样式个数确定,名字也确定,但要动态决定用不用的 -->
        <div class="basic" :class="classObj">{{name}}</div>

        <br>
        <hr>
        <br>
        <div class="basic" :style="styleObj">{{name}}</div>
        <br>
        <div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>


    </div>
    
</body>

<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            name:'WenJGo',
            mood:'normal',
            classArr:['masoul1','masoul2','masoul3'],
            classObj:{
                masoul1:false,
                masoul2:false
            },
            styleObj:{
                // 这里的key不能瞎写，这里是将font-size改的符合vue的要求
                fontSize: '40px',
                color:'skyblue',
                // 像这种原先是使用'-'连接的,就修改为驼峰命名
                // backgroundColor:'yellow'
            },
            styleObj2:{
                backgroundColor:'orange'
            }
        },
        methods: {
            changeMood(){
                // this.mood = 'happy'
                const arr = ['happy','sad','normal']
                this.mood = arr[Math.floor(Math.random()*3)]
            }
        },
    });
</script>
</html>

总结、

那么绑定样式这一节就完事啦。

在Vue中，绑定样式的技巧和常用习惯主要有以下几种：

使用class绑定：可以通过v-bind:class指令来动态地绑定class样式。可以将一个对象传递给v-bind:class，对象的属性可以是一个布尔值，根据布尔值来决定是否应用该样式，也可以是一个表达式，根据表达式的值来决定应用哪个样式。

例如：

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

使用style绑定：可以通过v-bind:style指令来动态地绑定内联样式。可以将一个对象传递给v-bind:style，对象的属性可以是一个字符串，表示样式的属性和值，也可以是一个表达式，根据表达式的值来决定样式的属性和值。

例如：

<div :style="{ fontSize: size + 'px', color: activeColor }"></div>

使用计算属性：可以使用计算属性来根据一些逻辑计算出样式的属性和值，然后绑定到元素上。

例如：

<div :style="computedStyle"></div>

computed: {
  computedStyle: function() {
    return {
      fontSize: this.size + 'px',
      color: this.isActive ? 'red' : 'blue'
    }
  }
}

使用样式组件：可以使用第三方的样式组件库，例如Element UI、Vuetify等。这些库一般都提供了一些预定义的样式组件，可以直接使用，也可以通过配置参数来动态地绑定样式。

总的来说，Vue中绑定样式的技巧和常用习惯主要是使用class和style绑定指令，以及结合计算属性和样式组件来实现动态绑定样式。这样可以很方便地根据不同的条件和逻辑来决定应用哪些样式。

原文地址：https://blog.csdn.net/DDDDWJDDDD/article/details/141749608

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

【玩转全栈】----基于ModelForm完成用户管理页面
在学完前面的部门管理案例后，自己独立写出个用户管理应该不难，基本逻辑和大致代码都和前面一样，大家可以自己试试。
阅读更多2025-01-23
深圳云盟智慧科技公司智慧停车管理系统GetVideo存在SQL注入漏洞
深圳云盟智慧科技公司开发的智慧停车管理系统，结合云平台和智能硬件，提供全方位的停车管理解决方案。系统可以覆盖停车场的入口、出口、车位监控、停车计费等功能，支持用户通过移动端进行预约、支付等操作，提升停
阅读更多2025-01-23
小盒科技携手体验家，优化智能教育服务体验，打造在线教育新高度
「小盒科技」携手体验家，通过基于关键场景的触点体验监测，实时收集用户反馈，快速响应并融入产品优化，进一步打磨每一个教育环节，从课程设计到交互界面，力求让用户感受到无缝衔接的学习体验，实现覆盖用户全生命
阅读更多2025-01-23
OpenAI战略转型：从安全研发到市场竞争
OpenAI正经历从安全导向向市场竞争导向的战略转型，通过开发类似《Her》电影中的AI助手等产品来满足用户需求。在技术层面，其GPT-4模型在多模态处理方面取得重大突破，能够实时处理文本、音频等多种
阅读更多2025-01-23
Vue3+Element Plus 实现 el-table 表格组件滚动是否触底监听判断
一种在 Vue3+Element Plus 项目实现 el-table 中监听竖向滚动是否触底判断的方法
阅读更多2025-01-23
Scala语言的编程范式
通过以上的讨论，我们可以看到，Scala语言汇聚了面向对象编程和函数式编程的优点，使得开发者能够灵活地选择最适合当前任务的编程范式。无论是在处理复杂的逻辑时使用函数式编程，还是在组织大型应用时使用面向
阅读更多2025-01-23
【详解】神经网络的发展历程
本文将详细描述神经网络的发展历程
阅读更多2025-01-23
Harmonyos之多目标构建产物实践
多目标产物在HarmonyOS系统中的应用主要体现在软件开发与分发方面，特别是针对不同用户群体、不同业务场景的需求进行定制化开发。多目标产物为开发者提供了更加灵活和高效的开发方式，使得应用能够更好地适
阅读更多2025-01-23
HarmonyOS Next 应用UI生成工具介绍
UI Generator用于快速生成可编译、可运行的HarmonyOS UI工程，支持基于已有UI布局文件（XML），快速生成对应的HarmonyOS UI代码，其中包含HarmonyOS基础工程、页
阅读更多2025-01-23
GitCode 助力 AutoTable：共创 MyBatis 生态的自动表格管理新篇章
在 MyBatis Flex 的兼容性拓展方面，AutoTable 拥有 2 位贡献者和 1 位核心开发者的专注投入，已完成 2 次代码合并，并接受了来自社区的 5 个 Issue，团队迅速解决了其中
阅读更多2025-01-23

Vue——认识day06_class与style绑定

总结、

相关文章