vue学习五(绑定class、v-bind:style(对象语法、数组语法))

最新推荐文章于 2024-09-20 11:35:39 发布
最新推荐文章于 2024-09-20 11:35:39 发布
阅读量7.5k 收藏 12
点赞数 6
分类专栏： React\Vue Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013210620/article/details/82865287
版权

文章目录

绑定 HTML Class

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

内联样式在模板里
 <div id="div1" :class="{active: isActive, 'text-danger': hasError}"></div>
  <script type="text/javascript">
        var vm1 = new Vue({
            el: "#div1",
            data: {
                isActive: true,
                hasError: true,
            }
        })
 </script>

通过浏览器查看，渲染的html结构是：

<div id="div1" class="active text-danger"></div>
内联样式不在模板里
  <div id="div2" :class="class_obj"></div>

    <script type="text/javascript">
        var vm2 = new Vue({
            el: "#div2",
            data: {
                class_obj: {
                    isActive: true,
                    hasError: true,
                }
            }
        })
    </script>

渲染为如下的结构：

<div id="div2" class="isActive hasError"></div>
绑定返回对象的计算属性

    <div id="div3" v-bind:class="classObject"></div>

    <script type="text/javascript">
        var vm3 = new Vue({
            el: "#div3",
            data: {
                isActive: true,
                error: true
            },
            computed: {
                classObject: function () {
                    return {
                        active: this.isActive && this.error,
                        'text-danger': this.error
                    }
                }
            }
        })
    </script>

渲染的html结构如下：

<div id="div3" class="active text-danger"></div>

数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

class 列表
 <div id="div4" v-bind:class="[activeClass, errorClass]"></div>
    <script type="text/javascript">
        new Vue({
            el: "#div4",
            data: {
                activeClass: 'active',
                errorClass: 'text-danger'
            }
        })
    </script>

渲染为

<div id="div4" class="active text-danger"></div>
class 列表使用三元表达式

如果你也想根据条件切换列表中的 class，可以用三元表达式：

<div id="div5" v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<script type="text/javascript">
    new Vue({
        el: "#div5",
        data: {
            isActive: true,
            activeClass: 'active',
            errorClass: 'text-danger'
        }
    })
</script>

渲染为：

<div id="div5" class="active text-danger"></div>
class 列表使用对象语法
 <div id="div6" v-bind:class="[{ active: isActive }, errorClass]"></div>
    <script type="text/javascript">
        new Vue({
            el: "#div6",
            data: {
                isActive: true,
                errorClass: 'text-danger'
            }
        })
    </script>

渲染为：

<div id="div6" class="active text-danger"></div>

class 综合练习

<style>
    .red {
      color: red;
    }

    .thin {
      font-weight: 200;
    }

    .italic {
      font-style: italic;
    }

    .active {
      letter-spacing: 0.5em;
    }
  </style>

<body>
  <div id="app">
    <h1 class="red thin">这是一个很大很大的H1，大到你无法想象！！！</h1>

    <!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用  v-bind 做数据绑定 -->
    <h1 :class="['thin', 'italic']">这是一个很大很大的H1，大到你无法想象！！！</h1>

    <!-- 在数组中使用三元表达式 -->
    <h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1，大到你无法想象！！！</h1>

    <!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->
    <h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1，大到你无法想象！！！</h1>

    <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；  属性的值 是一个标识符 -->
    <h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1>


  </div>

  <script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true,
        classObj: { red: true, thin: true, italic: false, active: false }
      },
      methods: {}
    });
  </script>
</body>

用在组件上

1、例如，如果你声明了这个组件：

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})

然后在使用它的时候添加一些 class：

<my-component class="baz boo"></my-component>

HTML 将被渲染为:

<p class="foo bar baz boo">Hi</p>

2、对于带数据绑定 class 也同样适用：

<my-component v-bind:class="{ active: isActive }"></my-component>

当 isActive 为 truthy[1] 时，HTML 将被渲染成为：

<p class="foo bar active">Hi</p>

绑定内联样式v-bind:style

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象

<div id="div1" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">{{ msg }}</div>

<script type="text/javascript">
    new Vue({
        el: "#div1",
        data: {
            activeColor: 'red',
            fontSize: 30,
            msg: "hello vue"
        }
    })
</script>

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div id="div2" v-bind:style="styleObject">{{ msg }}</div>
<script type="text/javascript">
    new Vue({
        el: "#div2",
        data: {
            msg: "直接绑定到一个样式对象通常更好",
            styleObject: {
                color: 'red',
                fontSize: '23px'
            }
        }
    })
</script>

对象语法常常结合返回对象的计算属性使用

<div id="div3" v-bind:style="styleObject">{{ msg }}</div>
<script type="text/javascript">
    new Vue({
        el: "#div3",
        data: {
            msg: "结合返回对象的计算属性使用",
            color: 'red',
            fontSize: '12px'
        },
        computed: {
            styleObject: function () {
                return {color: 'yellow', fontSize: '23px'}
            }
        }
    })
</script>

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

<div id="div4" v-bind:style="[baseStyles, overridingStyles]">{{ msg }}</div>
<script type="text/javascript">
    new Vue({
        el: "#div4",
        data: {
            msg: "我是数组绑定方法",
            baseStyles: {
                color: 'green',
                fontSize: '30px'
            },
            overridingStyles: {
                'font-weight': 'bold'
            }
        }
    })
</script>

浏览器渲染结果如下：
在这里插入图片描述

易辰_
关注
专栏目录
Vue Class与Style绑定
极北
03-22 1900
①数据绑定一个常见需求是操作元素的class列表和它的内联样式，因为它们都是属性，我们可以用  v-bind 处理它们：只需要计算出啊表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js专门增强了它，表达式的结果类型除了字符串之外，还可以是对象或数组。 ②绑定HTML Class    对象语法：       我们可以传给
Vue中使用v-bind绑定常见属性以及class、style的方法
m0_60266243的博客
07-26 3158
首先，v-bind的基础用法，就是用来绑定html中元素的属性。什么叫“html中元素的属性”？ 例如，img、a等等是html元素，而img中的src则是该元素的属性值。 v-bind绑定一些常用属性 如下，这样就将页面中链接的地址绑定到了“url”上，图片的地址绑定到了“imgUrl”上。 <div id="app"> <a v-bind:href="url">链接</a> <img v-bind:...
v-bind 数组语法（004）
weixin_31707323的博客
04-08 168
代码 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <script src="../js/vue.js"></script> <title>v-bind</title> <style> .box{
在vue中:style 的几种使用方式
最新发布
飞翔༒之翼
09-20 2237
在日常开发中:style的使用也是比较常见的：亲测有效。
v-bind动态绑定class（数组语法）
vfjcgg的博客
06-05 2283
（了解）v-bind动态绑定class（数组语法） 很多时候我们希望动态的来切换class,比如： 1.当数据为某个状态时，字体显示红色 2.当数据为另一个状态时，字体显示黑色 绑定class有两种方式： 1.对象语法 2.数组语法 绑定方式：对象语法 对象语法的含义是：class后面跟的是一个对象 对象语法有下面这些用法： 用法一：直接通过{}绑定一个类 <h2 class="title" v-bind:class="{active:isActive}">{{message}}</h2
Vue —— 样式绑定
HuoZhiyan 的博客
03-19 2490
一、class 属性绑定 class 与 style 是 HTML 元素的属性，用于设置元素的样式，可以用 v-bind 来设置样式属性。 Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。 为 v-bind:class 设置一个对象，从而动态的切换 class .active{ width:100px; height: 100px; background-color:
style绑定v-bind:style——Vue.js
zyz00000000的博客
11-02 1911
v-bind:style的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象 对象语法： （1）CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名： &lt;div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }...
vue基础之v-bind属性、class和style用法分析
10-17
Vue提供了两种方式来绑定`class`：对象语法和数组语法。在对象语法中，我们可以使用一个JavaScript对象来定义多个类，其中键是类名，值是布尔值，表示该类是否应该被应用： ```html <strong :class="{red: true, ...
2021-07-06 使用v-bind设置样式属性:class与style设置元素样式
GAARA
07-06 676
设置vuev-bind:classv-bind:style v-bind:class v-bind:style
Vue自定义v-bind:style指令详解及实战应用
在Vue.js中，`v-bind:style` 是一个非常重要的特性，它允许开发者动态地为元素绑定CSS样式。自定义指令则是Vue中一种扩展其功能的方式，允许开发者创建并实现自定义的行为逻辑，特别是在需要对底层DOM元素进行复杂...
详解vue中v-bind:style效果的自定义指令
10-15
主要介绍了vue中v-bind:style效果的自定义指令，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
Class与Style几种绑定用法
callmeCassie的博客
04-03 2181
在我们的项目开发中给元素添加/删除 class 是非常常见的行为之一， 例如我们的网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式，除了导航之外其他很多地方也都会用到这种方式处理选中与未选中。 除了设置 class 我们在项目中也经常设置元素的内联样式 style，在 jquery 时代我们大多数都是利用 addClass 与 removeClass 结合使用来处理 cla...
vue v-bind:style详解
weixin_41970780的博客
01-18 2118
vue v-bind:style详解 <div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">娃哈哈，娃哈哈</div> </div> <script> new Vue({ el: '#app', data: { baseStyles: { color: 'green', fontSize: '30px' }, ove
vue之v-bind绑定style（对象语法）
兮动人
09-10 4607
注意： key: value 表示时，key可以不加单引号或双引号，但value必须加上，或者直接在定义上加上符号 对象语法案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> </style> <body&g...
Vue学习笔记：v-bind动态绑定style
sweetYinger的博客
01-27 463
Vue学习笔记：v-bind动态绑定style一、对象语法二、数组语法 ■可以利用v-bind：style来绑定一些CSS内联样式 ■在写CSS属性名的时候，比如font-size — □可以使用驼峰式：fontSize — □或短横线分隔：‘font-size’ ■绑定style的两种方式：对象语法，数组语法 一、对象语法 ■style后面跟的是一个对象类型 —→对象的key是CSS的属性 —→对象的value是具体赋的值，值可以来自data中的属性 <div id="app"> <
学习Vue（6）——v-bind绑定样式
二木成林
01-18 1948
class和style是HTML元素的属性，可以设置元素的样式，前者为元素绑定CSS样式，后者为元素绑定内置样式。 而v-bind就是为HTML元素添加属性的，基于这一特性，故可以使用v-bind处理样式，并且vue做了强化，表达式的结果类型除了字符串之外，还可以是对象或数组。 简单绑定样式 <!DOCTYPE html> <html> <head> ...
Vue动态绑定Class与Style
长沙火山
03-17 5293
这样可以根据数据的变化来动态改变元素的样式，实现更灵活的样式控制。通过数组语法，可以根据多个条件的组合来决定元素应该添加哪些类，实现更复杂的样式控制。通过数组语法，可以根据多个条件的组合来决定元素应该具有哪些样式，实现更灵活的样式控制。这样，我们可以根据多个条件的组合来动态控制元素的样式，使页面更具交互性和灵活性。数组语法，可以实现更复杂的样式控制，根据多个条件的组合来动态改变元素的样式，满足不同的需求。通过数组语法，可以根据多个条件的组合来动态控制元素的样式，实现更灵活的样式控制。
vue中v-bind控制class和style
m0_72168336的博客
06-13 1112
当使用v-bind指令控制class和style时，可以通过动态绑定的方式根据不同的条件来添加或移除class，以及改变元素的样式。通过可以动态绑定class属性。可以使用对象语法、数组语法或者计算属性来实现。：使用对象语法，可以根据条件来动态添加或移除class。在上面的例子中，如果isActive为true，则会给该元素添加一个名为"active"的class。：使用数组语法，可以根据条件来添加或移除多个class。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值