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. 【DFS】Anniversary Cake

    [poj1020]Anniversary Cake Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 17203   Accep ...

  2. BZOJ 2738 矩阵乘法（整体二分+二维树状数组）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2738 [题目大意] 给出一个方格图,询问要求求出矩阵内第k小的元素 [题解] 我们对答 ...

  3. 【二分】【三分】【计算几何】XIII Open Championship of Y.Kupala Grodno SU Grodno, Saturday, April 29, 2017 Problem L. Lines and Polygon

    题意:给你一个凸多边形,和多次询问,每次询问给你一条直线,问你这条直线与凸包上的顶点的最近距离是多少. 记当前询问的直线的斜率为K, 先找到与这条直线距离最远的两个点: 就把凸包所有的边当做有向直线进 ...

  4. 【贪心】【set】zoj3963 Heap Partition

    贪心地从前往后扫,每到一个元素,就查看之前的元素中小于等于其的最大的元素是否存在,如果存在,就将它置为其父亲.如果一个结点已经是两个儿子的父亲了,就不能在set中存在了,就将他删除.如果然后将当前元素 ...

  5. python基础之封装与绑定方法

    封装 1.什么是封装: 封:属性对外隐藏,但对内开放 装:申请一个名称空间,往里装入一系列名字/属性 2.为什么要封装: 封装数据属性:不让外部使用者直接使用数据,需要类内部开辟一个接口,让外部通过接 ...

  6. POJ 2139 Six Degrees of Cowvin Bacon (弗洛伊德最短路)

    题意:奶牛拍电影,如果2个奶牛在同一场电影里演出,她们的合作度是1,如果ab合作,bc合作,ac的合作度为2,问哪一头牛到其他牛的合作度平均值最小再乘100 思路:floyd模板题 #include& ...

  7. Implicit declaration of function 'CC_MD5' is invalid in C99

    //导入这个就行了#import <CommonCrypto/CommonDigest.h> //没有导包的时候,提示如下: Implicit declaration of functio ...

  8. Mac OS X 11年9个版本的历经变化

    本月苹果将发布OS X 10.8 Mountain Lion,是Mac OS X系统在其11年生命长河中的第9个版本.2001年,刚从鬼门关爬回来的苹果决定在OS X上做一个赌注,因为他们已经浪费了1 ...

  9. 使用Gradle构建Android应用的渠道包

    所有做Android App的同志们应该都知道渠道包是什么,得力于Android生态的多样性,我等写Android应用的人类每次发布App都需要面对数十个市场,而为了能够采集到市场的表现数据,就必须为 ...

  10. 用LaTeX写线性规划

    线性规划由目标函数和若干约束构成,Latex中并没有直接的命令来写线性规划.简单的做法是使用＼begin{eqnarray} … ＼end{eqnarray}命令,但eqnarray命令是使若干方程按 ...