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. 定位所用的class

    方案 为解决类冲突,我们可以使用下述的方案定位一个class所在的位置 ClassName. package cn.j2se.junit.classpath; import static org.ju ...

  2. NIO使用Reactor模式遇到的问题

    关于Reactor模式,不再多做介绍,推荐Doug Lea大神的教程:Java 可扩展的IO 本来在Reactor的构造方法中完成一系列操作是没有问题的: public class Reactor i ...

  3. 服务器Tomcat WAS JBoss

    做任何web项目,都离不开服务器,有钱的公司用WebSphere.WebLogic,没钱公司用nginx+tomcat,不要小瞧nginx+tomcat麻雀虽小,五脏俱全. 服务器的知识,在笔试.面试 ...

  4. 【拓展Lucas】模板

    求\(C_n^m \mod p\),写得太丑了qwq. 第一次写拓展Lucas竟然是在胡策的时候qwq写了两个半小时啊_(:з」∠)还写挂了一个地方qwq 当然今天胡策我也是第一次写中国剩余定理(ˇˍ ...

  5. 【线段树】Atlantis

    Atlantis Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 23181   Accepted: 8644 Descrip ...

  6. POJ 2404 Jogging Trails（最小权完美匹配）

    [题目链接] http://poj.org/problem?id=2404 [题目大意] 给出一张图,求走遍所有的路径至少一次,并且回到出发点所需要走的最短路程 [题解] 如果图中所有点为偶点,那么一 ...

  7. BZOJ 1257 [CQOI2007]余数之和sum（分块）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1257 [题目大意] 给出正整数n和k,计算j(n,k)=k mod 1 + k mod ...

  8. 【拓扑排序】CDOJ1635 琵琶弦上说相思，当时明月在，曾照彩云归

    对于两个相邻的字符串 Si和Si+1 ,如果它们的前k-1位都相同,第k位不相同,那么,在字典序中 Si,k一定在 Si+1,k前面 建立有向边从 Si,k到 Si+1,k,进行拓扑排序 为了保证字典 ...

  9. 【Java】【滚动数组】【动态规划】UVA - 11137 - Ingenuous Cubrency

    滚动数组优化自己画一下就明白了. http://blog.csdn.net/u014800748/article/details/45849217 解题思路:本题利用递推关系解决.建立一个多段图,定义 ...

  10. 【点分治】【FFT】CDOJ1562 Amaz1ng Prime

    统计路径的时候,显然用母函数的思想,可以用FFT来方便统计. 注意!要减去路径两个端点相同的情况!然后再除以二!这样防止重复. 还有就是说啊,点分治的正确姿势还是应该用所有子树的答案减去各个子树分别的 ...