vue---class和style绑定

最新推荐文章于 2024-04-15 16:48:51 发布

一个平平无奇的小高

最新推荐文章于 2024-04-15 16:48:51 发布

阅读量173

点赞数 2

分类专栏： Vue 文章标签： vue javascript js

本文链接：https://blog.csdn.net/qq_44646343/article/details/107414566

版权

Vue 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

Just do it…
🐖：文章是供自己平时学习时用，相当于学习笔记，如有错误，欢迎指正~~

vue—class和style绑定

【vue.js官网描述】
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
【理解】Vue.js的核心是一个响应式的数据绑定系统，它允许我们在普通html模板中使用特殊的语法将DOM"绑定"到底层数据。被绑定的DOM将与数据保持同步，每当数据改动，相应的DOM视图也会更新。基于这种特性，通过Vue.js动态绑定class和style就变的简单了。
一、Vue–class绑定
方式(一)：三目写法

<div :class="isActive ? 'red' :'yellow'">动态绑定class--三目写法</div>

data:{isActive:true}

渲染为：
在这里插入图片描述

方式(二)：对象写法

 <div :class="classObj">动态绑定class--对象写法</div>

 data:{
     classObj:{
         a:true,
         b:false  //a b为class名字
     }
 }

渲染为：
在这里插入图片描述
方式(三)：数组写法

<div :class="classArr">动态绑定class--数组绑定</div>

data:{
    classArr:['a', 'b']
}

渲染为：
在这里插入图片描述
完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{background-color:red}
        .yellow{background-color:yellow}
        .a{font-size:10px;font-weight: bold;}
        .b{background:brown}
    </style>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="box">
        <button @click="handleClick()">click</button>
        <div :class="isActive ? 'red' :'yellow'">动态绑定class--三目写法</div>
        <div :class="classObj">动态绑定class--对象写法</div>
        <div :class="classArr">动态绑定class--数组绑定</div>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#box",
        data:{
            isActive:true,
            classObj:{   //对象写法
                a:true,
                b:false  //a b为class名字
            },
            classArr:['a', 'b']   //数组写法
        },
        methods:{
            handleClick(){
                this.isActive = !this.isActive
            }
        }
    })
</script>
</html>

效果：
在这里插入图片描述

二、Vue–style绑定
方式(一)：三目写法

<div :style="'background:' + (isActive ? 'red' : 'yellow')">动态绑定style--三目运算</div>

 data:{
       isActive:true
 }

渲染为：
在这里插入图片描述
方式(二)：对象写法

<div :style="classObj">动态绑定style--对象方法</div>

data:{
    classObj:{
               backgroundColor:'brown',   // 注意，像background-color这种带-的，必须写成驼峰命名法
    }     
}

渲染为：
在这里插入图片描述

一个平平无奇的小高

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue---class和style绑定

Just do it…????：文章是供自己平时学习时用，相当于学习笔记，如有错误，欢迎指正~~vue—class和style绑定【vue.js官网描述】操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
复制链接

扫一扫