1、绑定class

（1）对象语法

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>vue示例</title>

    </head>

    <body>

        <div id="app">

            <div class="static" :class="{'active':isActive,error:isError}">

                123

            </div>

        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>

        <script type="text/javascript">

            new Vue({

                el: '#app',

                data: {

                    isActive: true,

                    isError: true

                }

            });

        </script>

    </body>

</html>

对象可以传入多个属性，：class可以与普通的class共存。

（2）数组语法

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>vue示例</title>

    </head>

    <body>

        <div id="app">

            <div class="static" :class="[activeCls,errorCls]">

                123

            </div>

        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>

        <script type="text/javascript">

            new Vue({

                el: '#app',

                data: {

                    activeCls: 'active',

                    errorCls: 'error'

                }

            });

        </script>

    </body>

</html>

2、绑定内联样式

v-bind:style 给元素绑定内联样式，也有对象和数组语法写法。由于直接写一长串样式不便于阅读和维护，所以一般写在data或者computed里。

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>vue示例</title>

    </head>

    <body>

        <div id="app">

            <div :style="styles">

                123

            </div>

        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>

        <script type="text/javascript">

            new Vue({

                el: '#app',

                data: {

                    styles: {

                        color: 'red',

                        fontSize: '14px'

                    }

                }

            });

        </script>

    </body>

</html>

使用;style时vuejs会自动添加前缀。

VUE v-bind绑定class和style的更多相关文章

  1. vue.js之绑定class和style

    一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }"></di ...

  2. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  3. vue.js样式绑定

    vue.js样式绑定 class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性. Vue.js v-bind 在处理 class 和 styl ...

  4. Vue(三) v-bind 及 class 与 style 绑定

    DOM 元素经常会动态绑定一些 class 类名 或 style 样式,现在介绍使用 v-bind 指令来绑定 class 和 style 的多种方法. 了解 v-bind 指令 在之前已经介绍了指令 ...

  5. vue通过属性绑定为元素绑定style行内样式

    1.直接在元素上通过:style绑定书写             <h1 :style="{color: 'red','font-size': '40px'}">这是一 ...

  6. [js高手之路] vue系列教程 - vue的事件绑定与方法(2)

    一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...

  7. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  8. 第11课 std::bind和std::function（2）_std::bind绑定器

    1. 温故知新:std::bind1st和std::bind2nd (1)bind1st.bind2nd首先它们都是函数模板,用于将参数绑定到可调用对象(如函数.仿函数等)的第1个或第2个参数上. ( ...

  9. vue的样式绑定

    vue在样式绑定,看这官方的文档,怎么试都不行后来看了一篇文章 <div :class="[rankClass]"></div> <script> ...

  10. Vue 将样式绑定到一个对象让模板更清晰

    Vue 将样式绑定到一个对象让模板更清晰 <div id="app"> <div v-bind:style="styleObject"> ...

随机推荐

  1. python3中使用xpath无法定位，为什么一直返回空列表？

    tbody问题: 在爬去某些网站一些信息的时候,xpath工具上显示类容是正确的,但是在scrapy代码中一直返回空列表 Scrapy的部分代码: class LotteryspiderSpider( ...

  2. HihoCoder - 1715 树的连通问题

    题面在这里! 正式告别文化课回归的第一题QWQ,然鹅半个月之后还是要退役QWQWQWQWQ 好像很久之前就见过的一个题,当时只会打一打 O(N^2) 的暴力QWQ,正好今天又写了遍这个暴力用来对拍23 ...

  3. 【树形dp】Computer

    Computer Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  4. 【前缀和】【枚举倍数】 Codeforces Round #432 (Div. 2, based on IndiaHacks Final Round 2017) D. Arpa and a list of numbers

    题意:给你n个数,一次操作可以选一个数delete,代价为x:或者选一个数+1,代价y.你可以进行这两种操作任意次,让你在最小的代价下,使得所有数的GCD不为1(如果全删光也视作合法). 我们从1到m ...

  5. 【AC自动机】【状压dp】【滚动数组】hdu6086 Rikka with String

    给你m个01串,问你有多少个长度为2L的01串,满足前半段倒置取反后等于后半段,并且包含所有的m个01串. 考虑单词完全在中线前面或者后面的情况,直接将单词及其倒置取反插入AC自动机,AC自动机每个结 ...

  6. Objective-c nil, Nil, NULL和NSNull的区别

    在OC中可能经常会遇到 nil,Nil,NULL和NSNull,下面分析一下之间的区别: Symbol Value Meaning NULL (void *)0 literal null value ...

  7. bzoj 1787: [Ahoi2008]Meet 紧急集合

    1787: [Ahoi2008]Meet 紧急集合 Description Input Output Sample Input 6 4 1 2 2 3 2 4 4 5 5 6 4 5 6 6 3 1 ...

  8. Java并发（三）：重排序

    在执行程序时为了提高性能,提高并行度,编译器和处理器常常会对指令做重排序.重排序分三种类型: 编译器优化的重排序.编译器在不改变单线程程序语义的前提下,可以重新安排语句的执行顺序. 指令级并行的重排序 ...

  9. Java如何进行异常处理

    关键字:throws.throw.try.catch.finally的用法 Java通过面向对象的方法进行异常处理,把各种不同的异常进行分类,并提供了良好的接口.在Java中,每个异常都是一个对象,它 ...

  10. mybatis查询日期时间数据得到long类型数据的问题

    使用mybatis查询数据时,如果数据库存储的是timestamp.datetime.date.time等时间类型,而Java bean也使用的是date类型,mybatis会自动将date类型转换为 ...