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. poj 3122（二分查找）

    Pie Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13564   Accepted: 4650   Special Ju ...

  2. [BZOJ4003][JLOI2015]城池攻占(左偏树)

    这题有多种做法,一种是倍增预处理出每个点往上走2^i步最少需要的初始战斗力,一种是裸的启发式合并带标记splay. 每个点合并能攻占其儿子的所有骑士,删去所有无法攻占这个城市的骑士并记录答案. 注意到 ...

  3. [BZOJ4709][JSOI2011]柠檬(斜率优化DP)

    显然选出的每一段首尾都是相同的,于是直接斜率优化,给每个颜色的数开一个单调栈即可. #include<cstdio> #include<vector> #include< ...

  4. AGC 012 B - Splatter Painting

    题面在这里! (显然首先想到反着做比较简单,每个点取第一次被覆盖到的颜色) 发现d非常小,那么是否可以暴力覆盖呢??? 考虑一个稠密图..暴力肯定就gg了啊... 不过我们可以对每一个点 i 记一个m ...

  5. BZOJ 1123 [POI2008]BLO（Tarjan算法）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1123 [题目大意] Byteotia城市有n个towns,m条双向roads. 每条r ...

  6. 【构造】Ural Championship April 30, 2017 Problem K. King’s island

    题意:让你构造一个n个点的简单多边形,使得所有点是整点,并且所有边长是整数,并且没有边平行于坐标轴. 就利用勾股数,如下图这样构造即可,n为偶数时,只需矩形拼成,n为奇数时,封上虚线边即可. #inc ...

  7. 给ul下的li加click时间

    $('.province ul li').click(function() {//方法 });

  8. Jquery JS 正确的比较两个数字大小的方法

    if(2 > 10){ alert("不正确!");} 此比较不会是想要的结果:它相当于2 >1,把10的第一位取出来比较. 解决方 法:  if(eval(2) &g ...

  9. 过滤器chain.doFilter(request,response)的含义

    过滤器的生命周期一般都要经过下面三个阶段: 初始化: 当容器第一次加载该过滤器时,init() 方法将被调用.该类在这个方法中包含了一个指向 Filter Config 对象的引用.我们的过滤器实际上 ...

  10. 解决ping 127.0.0.1不通的问题

    用树莓派放在家里当pt下载器,一直挺惬意的,因为没有公网ip用vps和frp配置代理,偶尔ssh上去看看,一段时间也用得好好的. 可是最近这几天,在办公室ssh上去死活连不上. 于是回去后开始折腾,局 ...