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. stm32手册上的英文

    crystal-less 无晶振 USB  FS(Full-speed)此外还有High-speed接口(简称HS),Low-speed接口(简称LS) frequency频率 CRC(Cyclic ...

  2. 【python-HTMLTestRunner】生成HTMLTestRunner报告报错ERROR 'ascii' codec can't decode byte 0xe5 in position 0: ordinal not in range(128)

    [python-HTMLTestRunner]生成HTMLTestRunner报告报错:ERROR 'ascii' codec can't decode byte 0xe5 in position 0 ...

  3. Pycharm 开发 Django 项目

    1. 安装Pycharm, 自行百度安装教程 2. 安装python3 自行百度安装教程 3. 安装Django框架 使用命令: Window的终端控制台输入:安装Django框架. pip inst ...

  4. ESP-IDF版本更新说明（V2.1版）转自github（https://github.com/espressif/esp-idf/releases/）

    ESP-IDF Release v2.1  igrr 发布了这个 on 29 Jul · 自此发布以来,我承诺要 承诺414 自v2.0以来的变化. 突破变化 版本v2.1旨在大大兼容为ESP-IDF ...

  5. document.domain实现不同域名跨域

    利用document.domain 实现跨域:前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain进行跨域. 两个子域名:aaa.xxx ...

  6. 设计模式总结（Java）—— 单例模式

    1. 定义 为了确保一个类有且仅有一个实例,而且自行实例化并向整个系统提供这个实例. 2. 使用场景 确保某个类有且只有一个对象的场景,避免产生多个对象消耗过多的资源,或者某种类型的对象只应该有且只有 ...

  7. Javascript多线程

    最近项目中要用一个倒计时,但是当弹窗的时候倒计时会被阻塞,所以我想到使用Javascript多线程解决该问题. 虽然JavaScript是单线程的,但是通过worker可以让Javascript另外开 ...

  8. Java匹马行天下之JavaSE核心技术——面向对象

    面向对象 注: 看此篇时强烈建议有一定的面向对象思想基础,有一定的基础后先翻到下面看第九条:      9.面向对象: 从未封装→封装→继承→多态→抽象类→接口的代码演变 按这个逻辑去看,,哪有不理解 ...

  9. Xamarin.Android 使用线程无法更改页面文本问题

    前言: 刚接触Xamarin.Android不到一个月时间,却被他折磨的不要不要的,随着开发会出现莫名其妙的问题,网上类似Xamarin.Android的文档也不多,于是本片文章是按照Java开发An ...

  10. mysql 开发进阶篇系列 33 工具篇(mysqlbinlog日志管理工具)

    一.概述 由于服务器生成的二进制日志文件以二进制格式保存,所以如果要想检查这些文件的文本格式,就会用到mysqlbinlog日志管理工具. mysqlbinlog的语法如下: mysqlbinlog ...