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. Bzoj 1055 玩具取名（区间DP）

    题面 题解 字符很麻烦,不妨用数字代替(比如1代表'W') const char c[5] = {0, 'W', 'I', 'N', 'G'}; 接着,像这种两个子串可以合并成另一个子串的题可以考虑区 ...

  2. Python开发基础-Day15正则表达式爬虫应用，configparser模块和subprocess模块

    正则表达式爬虫应用(校花网) import requests import re import json #定义函数返回网页的字符串信息 def getPage_str(url): page_stri ...

  3. java中ThreadLocal类的使用

    ThreadLocal是解决线程安全问题一个很好的思路,ThreadLocal类中有一个Map,用于存储每一个线程的变量副本,Map中元素的键为线程对象,而值对应线程的变量副本,由于Key值不可重复, ...

  4. 【POJ 2154】Color

    http://poj.org/problem?id=2154 还是先套上Burnside引理:\[\begin{aligned} ans & =\sum_{i=1}^n n^{(i,n)-1} ...

  5. [BZOJ2159]Crash的文明世界(斯特林数+树形DP)

    题意:给定一棵树,求$S(i)=\sum_{j=1}^{n}dist(i,j)^k$.题解:根据斯特林数反演得到:$n^m=\sum_{i=0}^{n}C(n,i)\times i!\times S( ...

  6. java之判断输入的数是否为素数

    import java.util.Scanner; public class TestIsSushu { public static void main(String[] args) { Scanne ...

  7. Problem B: 指针：调用自定义交换函数，完成5个浮点数从小到大排列

    #include<stdio.h> int swap(float *p1,float *p2) { float flag; if(*p1>*p2) { flag=*p1; *p1=* ...

  8. 94.Txx考试

    2894 Txx考试  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description Txx是一个成绩很差的人,考试便成了他 ...

  9. keytool工具生成自签名证书并且通过浏览器导入证书

    1.生成服务器证书库 keytool -genkey -alias tomcat -keypass changeit -keyalg RSA -keysize 1024 -validity 365 - ...

  10. trim()函数 mysql中的强大字符串过滤函数

    mysql中功能强大的trim()函数. 去除两边空格: mysql> select trim(' hello world '); +-----------------------+ | tri ...