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

最新推荐文章于 2024-06-13 15:01:17 发布
最新推荐文章于 2024-06-13 15:01:17 发布
阅读量350 收藏 1
点赞数
分类专栏： vue 前端开发 需要回头看的文章
原文链接：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>

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

渲染为如下的结构：

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

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

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

渲染的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>

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

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

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

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

</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>

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

LTIven
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【学习笔记-Vue】基础篇-04-v-bind及class与style绑定
AlanLee97的博客
11-13 215
【学习笔记-Vue】基础篇-04-v-bind及class与style绑定 目录 1. 了解v-bind指令 2. 绑定class的几种方式 2.1 对象语法 2.2 数组语法 2.3 在组件上使用 3. 绑定内联样式 1. 了解v-bind指令 v-bind的主要作用就是动态更新HTML元素上的属性 <div id="app"> <!-- v-bind --> ...
VUE基础篇Part4（v-bind动态绑定class，style）
weixin_42617604的博客
05-30 186
1、了解 v-bind 指令 概念：DOM元素经常会动态的绑定一些 class 属性和 style 样式，v-bind 可以动态的绑定元素的属性，并且更改属性，所以会经常用到 例子： <div id="app"> <a v-bind:href="url">点我去百度</a> <img v-bind:src="imgUrl" alt=""> ...
初学必懂—vue绑定class的几种方式+绑定内联样式总结
Xmumu_的博客
03-17 3359
文章目录对象语法数组语法 对象语法 最常见的就是给v-bind:class设置一个对象，可以动态切换class： <div id="app"> <div :class = "{'active': isActive}">active生效</div> </div> <script> var app = new Vue({ el: '#app', data: { isActive:true
vue学习五(绑定class、v-bind:style(对象语法、数组语法))
全干工程师
09-27 7494
文章目录绑定 HTML Class内联样式在模板里内联样式不在模板里绑定返回对象的计算属性数组语法class 列表class 列表使用三元表达式class 列表使用对象语法用在组件上绑定内联样式v-bind:style 绑定 HTML Class 我们可以传给 v-bind:class 一个对象，以动态地切换 class： 内联样式在模板里 &amp;amp;lt;div id=&amp;quot;div1&amp;quot; :class=&amp;quot;{...
vue中v-bind控制class和style
最新发布
m0_72168336的博客
06-13 1013
当使用v-bind指令控制class和style时，可以通过动态绑定的方式根据不同的条件来添加或移除class，以及改变元素的样式。通过可以动态绑定class属性。可以使用对象语法、数组语法或者计算属性来实现。：使用对象语法，可以根据条件来动态添加或移除class。在上面的例子中，如果isActive为true，则会给该元素添加一个名为"active"的class。：使用数组语法，可以根据条件来添加或移除多个class。
Vue框架（绑定class样式）
zky__sch的博客
08-03 787
虽然有很多中绑定类样式的方法，但是每种类型各有千秋，要根据使用场景来去使用。
Vue.js技巧之Class与样式绑定介绍
xiaoweids的博客
06-10 568
转自：微点阅读 https://www.weidianyuedu.com数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是 attribute，我们可以用 v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。绑定 HTML Class尽管可以用 Mustache 标签绑定 class，比如 `{% raw
vue中的Class与v-bind绑定
mushroomLNL的博客
03-06 428
v-bind用于class和style的不同情况 一.对象语法 active 这个 class 是否有效取决与 isActive 的值 , 且不影响普通class d1 的设置 , 并且这个div 的 class的取值一直动态的受isActive的影响 <div v-bind:class="{ active: isActive }" class="d1"></div> 如果isActive 为 true上面的表达式相当于 <div class="d1 active">&
vue之class绑定数组形式
seimeii的博客
04-27 1295
1.html结构 <div id="app"> //这里填写的是data里的key值 <div :class="[activeClass,errorClass]">测试样式</div> <button @click="handle">切换</button> </div> 2.style <style> .active {
vue基础之v-bind属性、class和style用法分析
10-17
在Vue.js中，`v-bind`是一个非常重要的指令，用于动态地绑定属性到我们的组件或者元素上。在本文中，我们将深入探讨`v-bind`如何与`class`和`style`一起工作，来实现动态的样式和类管理。 首先，让我们从`v-bind`的...
一文读懂vue动态属性数据绑定（v-bind指令）
10-15
本文将详细介绍 `v-bind` 的使用，包括基本用法、绑定 class 属性以及数组语法。 1. `v-bind` 基本用法： 在 Vue 中，`v-bind` 用于动态地将数据模型绑定到元素的属性。`:` 符号是 `v-bind` 的简写，使得代码更简洁...
Vue v-bind动态绑定class实例方法
10-15
类似地，`v-bind:style`也可以动态绑定样式。对象语法允许我们将CSS属性作为键，数据属性的值作为值： ```html <li :style="{color: color, fontSize: size + 'px'}">{{list}} ``` 值可以是直接的字符串，如`'red'...
一文读懂vue动态属性数据绑定（v-bind指令）.docx
01-22
在上面的代码中，v-bind:style 将对象 `{color: 'red', fontSize: '24px'}` 绑定到 div 标签的 style 属性上。 四、错误的写法 需要注意的是，v-bind 指令不能与 Mustache 语法混合使用，例如： ```html <a v-bind...
v-bind:class
qq_36981190的博客
11-16 782
1、数组语法 我们可以把一个数组传给 v-bind:class，以应用一个 class 列表： <div v-bind:class="[activeClass, errorClass]"></div> 注意：1、activeClass和errorClass若是不带单引号则需要在data中定义， 2、若v-bind:class="[‘activeClass’, ‘errorClass’],带单引号的话则不要定义，直接在style中写样式 ...
初识vue 基础知识点 (1)
rwedgsd的博客
05-09 1016
Vue 是用于构建用户界面的 渐进式 JS框架 它是可以自底向上逐层应用，其核心库只关心视图/模板层，（视图/模板：就是要展示在页面上的东西） 什么是渐进式框架： 声明呈现 ——> 组件系统 ——> 客户端路由 ——> 大规模的状态管理 ——> 构建系统 可以根据项目的不同程度，来选择其中的功能 只使用Vue最基础的声明式渲染的功能，则完全可以把 Vue当做一个模板引擎来使用 想以组件化开发方式进行开发，则可以进一步使用Vue 里面的组件系统 要制作 SPA(单页应用)，则可以使
Vue学习日志之组件的数据传递v-bind
前端啤酒屋
10-07 499
传递数字，布尔值，数组，对象要使用v-bind 否则仅仅是传递字符串 <div id='app'> <my-component message="[1,2,3]"></my-component> <my-component :message="[1,2,3]"></my-component> </div> &...
v-bind动态绑定class（数组语法）
vfjcgg的博客
06-05 2252
（了解）v-bind动态绑定class（数组语法） 很多时候我们希望动态的来切换class,比如： 1.当数据为某个状态时，字体显示红色 2.当数据为另一个状态时，字体显示黑色 绑定class有两种方式： 1.对象语法 2.数组语法 绑定方式：对象语法 对象语法的含义是：class后面跟的是一个对象 对象语法有下面这些用法： 用法一：直接通过{}绑定一个类 <h2 class="title" v-bind:class="{active:isActive}">{{message}}</h2
v-bind动态绑定class(数组语法)
qq_41768447的博客
08-02 828
数组语法的含义：class后面跟的是一个数组； 数组语法的四种用法： 用法一：直接通过 [ ]绑定一个类； <h2 :class="['active']">hello world</h2> 用法二：也可以传入多个值； <h2 :class="['active','line']">hello world</h2> 用法三：和普通的类同时存在，并不冲突； 注：会有title/active/line三个类； <h2 class="title".
前端学习日记Vue: v-bind用于 class 和 style 时表达式结果的类型可以是字符串,对象或数组.
weixin_42585386的博客
10-12 714
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> </head>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值