详解Vue.js Class与Style绑定

目录
  • Vue.js Class与Style绑定
    • 绑定HTML Class
      • 对象语法
      • 数组语法
    • 绑定内联样式
      • 对象语法
      • 数组语法
      • 自动添加前缀
  • 总结

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浏览器)

总结

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

(0)

相关推荐

  • 学习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样式(6)

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

  • 详解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样式

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

  • 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绑定

    目录 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路径指定的页面. 前后的分离后,前端页面跳转的方式发生了变化,不再需要后端处理了,数据交换方式也改变了,由此前端

随机推荐