详解Vue.js Class与Style绑定

2024-12-02 13:39:23

Vue.js Class与Style绑定

对于数据绑定，一个常见的需求是操作元素的class列表和它的内联样式。因为它们都是attribute，我们可以用v-bind处理它们；只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在v-bind用于class和style时，Vue.js专门增强了它。表达式的结果类型除了字符串以外，还可以是对象或数组。

绑定HTML Class

对象语法

我们可以传给v-bind:class一个对象，以动态地切换class。注意，v-bind:class指令可以与普通的class特性共存。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example" class="static" :class=" {'didi-orange': isRipe,'didi-green': isNotRipe}"></div>
</body>
<script>
    new Vue({
        el: '#example',
        data: {
            isRipe: true,
            isNotRipe: false
        }
    })
</script>
</html>

当isRipe和isNotRipe变化时，class列表将相应地更新。例如，如果isNotRipe变为true，那么class列表将变为“static didi-orange didi-green”。

注：尽管可以用Mustache标签绑定class，比如class="{{className}}"，但是我们不推荐这种写法和v-bind:class混用。
我们也可以直接绑定数据中的一个对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example" :class="ddfe"></div>
</body>
<script>
    new Vue({
        el: '#example',
        data: {
            ddfe: {
                isRipe: true,
                isNotRipe: false
            }
        }
    })
</script>
</html>

还可以在这里绑定一个返回对象的计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example" :class="ddfe"></div>
</body>
<script>
    new Vue({
        el: '#example',
        data: {
            didiAge: 4,
            didiMember: 6000
        },
        computed: {
            ddfe: function () {
                return {
                    'didi-orange': this.didiAge > 3,
                    'didi-large': this.didiMember > 1000
                }
            }
        }
    })
</script>
</html>

数组语法

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example" :class="[didiHandsome,didiBeautful]"></div>
</body>
<script>
    new Vue({
        el: '#example',
        data: {
            didiHandsome: 'didiHandsome',
            didiBeautful: 'didiBeautful'
        }
    })
</script>
</html>

绑定内联样式

对象语法

v-bind:style的对象语法十分直观——看着非常像CSS，其实它是一个JavaScript对象。CSS属性名可以用驼峰式或短横分隔命名。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example" :style="{ color: didiColor, fontSize: fontSize + 'px' }"></div>
</body>
<script>
    new Vue({
        el: '#example',
        data: {
            didiColor: 'orange',
            fontSize: 30
        }
    })
</script>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example" :style="ddfe"></div>
</body>
<script>
    new Vue({
        el: '#example',
        data: {
            ddfe: {
                color: 'orange',
                fontSize: '13px'
            }
        }
    })
</script>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="example" :style="ddfe"></div>
</body>
<script>
    new Vue({
        el: '#example',
        data: {
            didiAge: 4,
            didiMember: 6000
        },
        computed: {
            ddfe: function () {
                return {
                    color: this.didiAge>3 ? 'orange': 'green',
                    fontSize: this.didiMember>1000 ? '20px': '10px'
                }
            }
        }
    })
</script>
</html>

数组语法

v-bind:style的数组语法可以将多个样式对象应用到一个元素上。

<div id="example" :style="[ ddfe, didiFamily]"></div>

自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

主流浏览器引擎前缀:

webkit（谷歌，Safari，新版Opera浏览器，以及几乎所有iOS系统中的浏览器（包括 iOS 系统中的火狐浏览器）；基本上所有基于WebKit 内核的浏览器）
moz（火狐浏览器）
o（旧版Opera浏览器）
ms（IE浏览器和 Edge浏览器）

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

vue.js绑定class和style样式（6）

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 通过 v-bind:class 或者 :class 来为style或者class来绑定绑定class <div class="test">
vue.js学习笔记之绑定style样式和class列表

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q
vue.js入门教程之绑定class和style样式

一.前言相信大家都知道数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 二.绑定 HTML Class 请注意:尽管可以用 Mustache 标签绑定 class,比如 class="{{ className }}&quo
详解vue.js之绑定class和style的示例代码

一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }"></div>.class后面的双引号里接受一个对象字面量/对象引用/数组作为参数, 这里,{active: isActive}是对象参数,active是class名,isActive是一个布尔值.下面是一个例子: 绑定对象字面量 html: <div id="classBind">
学习vue.js中class与style绑定

关于vue.js中class与style绑定的练习代码,分享给大家,供大家参考: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs中Class与Style 绑定</title> <link rel="stylesheet" href="css/vu
详解Vue.js Class与Style绑定

目录 Vue.js Class与Style绑定绑定HTML Class 对象语法数组语法绑定内联样式对象语法数组语法自动添加前缀总结 Vue.js Class与Style绑定对于数据绑定,一个常见的需求是操作元素的class列表和它的内联样式.因为它们都是attribute,我们可以用v-bind处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在v-bind用于class和style时,Vue.js专门增强了它.表达式的结果类型除了字符串以外,还可以是
详解 vue.js用法和特性

前言最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j
详解Vue.js中.native修饰符

修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定.这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧. .native修饰符官方对.native修饰符的解释为: 有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native .例如: <my-component v-on:click.native="doTheThing"></my-component>
详解Vue.js 响应接口

Vue 可以添加数据动态响应接口. 例如以下实例,我们通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应. 实例中通过点击按钮计数器会加 1.setTimeout 设置 10 秒后计算器的值加上 20 . <div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click
详解vue中v-model和v-bind绑定数据的异同

vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data
详解Vue.js 可拖放文本框组件的使用

可拖放文本框允许用户通过拖动备选项至文本框来确定输入,其实也可以说是 combobox 的一种变形. 与 combobox 相比,这种组件能让用户更加直观的看到所有备选项,并且可以是多个输入共用一组备选项. 类似的组件也曾用在 3D Windrose App,Graph Maker App 等多个 app 里. 注册组件注册可拖放文本框组件(其实就是将封装好的这部分代码 Ctrl+C and Ctrl+V). <script type="text/x-template" id=
详解Vue.js基于$.ajax获取数据并与组件的data绑定

Vue.js与jQuery不冲突??? 在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax请求来完成的. 说到ajax请求,第一反应肯定想到了jQuery,项目中如果引入jQuery会帮助我们简化很多操作,简化DOM操作,ajax方法获取后端数据等. 然而,Vue.js和jQuery冲突吗??? 答案显然是不冲突!!! 接下来会实现Vue.js组件中使用jQuery的ajax方法获取服务器端数据并绑定至组件的data中. 创建Vue.js单文件组件 <
详解vue.js组件化开发实践

前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-
详解vue.js+UEditor集成 [前后端分离项目]

首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建,其中用到了superUI来作为后端登陆之后的主页面框架,中间集成vue的大型单页应用: 后端,springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo +zookeep
详解Vue.js项目API、Router配置拆分实践

前后端分离开发方式前端拥有更高的控制权随着前端框架技术的飞速发展,Router这个概念也被迅速普及到前端项目中,在早期前后的没有分离的时期下,并没有明确的路由概念,前端页面跳转大多是通过后端进行请求转发的,比如在Spring MVC项目中,进行一个页面跳转如下(画红线部分): 前端需要一个超链接,链接的href=/manager,这样这个超链接被转发到scs/waitFollowed路径指定的页面. 前后的分离后,前端页面跳转的方式发生了变化,不再需要后端处理了,数据交换方式也改变了,由此前端

详解Vue.js Class与Style绑定

目录

Vue.js Class与Style绑定

绑定HTML Class

对象语法

数组语法

绑定内联样式

对象语法

数组语法

自动添加前缀

总结

相关推荐

随机推荐