Class 与 Style 绑定

动态修改元素样式

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="./vue.js"></script>

    <style type="text/css">

        .normal {

            color: palegreen

        }

        .error {

            color: red

        }

    </style>

</head>

<body>

    <div id="root">

        <div class="normal" v-bind:class="{error: changed}" @click="handleClick">{{message}}</div>

    </div>

    <script>

        new Vue({

            el: "#root",

            data: {

                changed: false,

                message: "hello world"

            },

            methods: {

                handleClick: function () {

                    this.changed = !this.changed

                }

            }

        })

    </script>

</body>

上述代码定义了两种样式：normal 和 error，通过判断 changed 值是否为 true 来决定是否使用 error 样式

为一个元素绑定多种样式

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="./vue.js"></script>

    <style type="text/css">

        .normal {

            color: palegreen

        }

        .fs{

            font-size: 24px

        }

    </style>

</head>

<body>

    <div id="root">

        <div v-bind:class="styles">{{message}}</div>

    </div>

    <script>

        new Vue({

            el: "#root",

            data: {

                changed: false,

                message: "hello world",

                styles:["normal","fs"]

            }

        })

    </script>

</body>

v-bind:class 支持对多种样式进行增加或异常，可参考动态修改样式来解决这个问题。

应用在组件上

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="./vue.js"></script>

    <style type="text/css">

        .normal {

            color: palegreen

        }

        .fs {

            font-size: 24px

        }

    </style>

</head>

<body>

    <div id="root">

        <my-component v-bind:class="styles" :msg="message"></my-component>

    </div>

    <script>

        Vue.component("my-component", {

            props: ["msg"],

            template: "<p>{{msg}}</p>"

        })

        new Vue({

            el: "#root",

            data: {

                message: "hello world",

                styles: ["normal", "fs"]

            }

        })

    </script>

</body>

绑定内联样式

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="./vue.js"></script>

    <style type="text/css">

        .normal {

            color: palegreen

        }

        .error {

            color: red

        }

        .fs {

            font-size: 24px

        }

    </style>

</head>

<body>

    <div id="root">

        <div v-bind:style="styleObject">{{message}}</div>

    </div>

    <script>

        new Vue({

            el: "#root",

            data: {

                message:'hello world',

                styleObject: {

                    color: 'blue',

                    fontSize: '13px'

                }

            }

        })

    </script>

</body>

v-bind:style 的数组语法支持将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

Vue 系列之 样式相关的更多相关文章

  1. AnjularJS系列1 —— 样式相关的指令

    最近,开始学习AngularJS. 开始记录学习AngularJS的过程,从一些很简单的知识点开始. 习惯先从实际应用的指令开始,再从应用中去体会AngularJS的优缺点.使用的场景等. 之前一直希 ...

  2. Vue Cli 中使用 Karma / Chrome 执行样式相关单元测试

    在 GearCase 开源项目 中,我使用了 Vue Cli 的默认测试框架.因此和样式相关的东西,都无法进行测试.因为它并不类似于无头浏览器,而是存在于虚拟内存之中. 现状 在如下 button.s ...

  3. 【AnjularJS系列1 】— 样式相关的指令

    最近,开始学习AngularJS. 开始记录学习AngularJS的过程,从一些很简单的知识点开始. 习惯先从实际应用的指令开始,再从应用中去体会AngularJS的优缺点.使用的场景等. 之前一直希 ...

  4. Vue系列（一）：简介、起步、常用指令、事件和属性、模板、过滤器

    一. Vue.js简介 1. Vue.js是什么 Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 是一个轻量级MVVM(Model-View-ViewModel)框架,和 ...

  5. Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

  6. Vue系列：在vux的popup组件中使用百度地图遇到显示不全的问题

    问题描述: 将百度地图封装成一个独立的组件BMapComponent,具体见 Vue系列:如何将百度地图包装成Vue的组件(http://www.cnblogs.com/strinkbug/p/576 ...

  7. [js高手之路] vue系列教程 - 事件专题(4)

    本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...

  8. Vue系列（2）：Vue 安装

    前言:关于页面上的知识点,如有侵权,请看 这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好 大家都知道,学 Vue 最好还是去官网学,官网写 ...

  9. Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡

    上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...

随机推荐

  1. 基于UML的毕业选题系统建模研究

    一.基本信息 标题:基于UML的毕业选题系统建模研究 时间:2018 出版源:电脑迷 领域分类:UML建模技术 二.研究背景 问题定义:为了加强学生设计分析开发软件的相关能力,有效避免结构化模型存在的 ...

  2. Oracle通过序列+触发器实现主键自增

    接触oracle没多久,在建表的时候发现还不会如何设置主键自动增长.和mysql的设置为AUTO_INCREMENT属性相比,要复杂很多,所以现在记录起来. 我使用的是序列+触发器的方式. 现在已经创 ...

  3. mac中启动jmeter方法

    1.mac中安装了jdk后,不需要去配置环境变量 2.现在jmeter包,解压缩后.打开terminal 3.在terminal中输入命令:sh jmeter.sh 打开Terminnal的方法: T ...

  4. 记一次安装VS2015后启动失败的修复过程

    安装过程没有提示任何问题,然而启动vs时提示没有安装 .Net Framework 4.6,那就安装吧,但是安装 4.6 时却提示 Windows Moudle Installer 服务没有启动,于是 ...

  5. 「WC2018」州区划分（FWT）

    「WC2018」州区划分(FWT) 我去弄了一个升级版的博客主题,比以前好看多了.感谢 @Wider 不过我有阅读模式的话不知为何 \(\text{LATEX}\) 不能用,所以我就把这个功能删掉了. ...

  6. Maven(个人整理)(一，未完待续)

                                                      Maven 1. 什么是Maven? 乍一看,Maven看起来很多东西,但简而言之,Maven试图将 ...

  7. 【Spark调优】：结合业务场景，优选高性能算子

    聚合操作使用reduceByKey/aggregateByKey替代groupByKey 参见我的这篇博客说明 [Spark调优]:如果实在要shuffle,使用map侧预聚合的算子 内存充足前提下使 ...

  8. cc、gcc、g++、CC的区别和联系

    gcc是C编译器:g++是C++编译器:linux下cc一般是一个符号连接,指向gcc:gcc和g++都是GUN(组织)的编译器.而CC则一般是makefile里面的一个名字,即宏定义,嘿,因为Lin ...

  9. 初识The ONE

    Author:bakari  Date:2014.1.14 转载请注出处:http://www.cnblogs.com/bakari/p/3519841.html,谢谢! 本学期开始做真正意义上的研究 ...

  10. [源码]python Scapy Ftp密码嗅探

    [源码]python Scapy Ftp密码嗅探 原理很简单,FTP密码明文传输的 截取tcp 21端口User和Pass数据即可 Scapy框架编译程序较大(一个空程序都25M),所以就不提供exe ...