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. PHP字符串函数之 sscanf echo print sprintf vsprintf printf vprintf fprintf vfprintf

    sscanf – 根据指定格式解析输入的字符 echo – 输出一个或多个字符串 print – 输出字符串 sprintf – 返回格式化字符串 vsprintf – 返回格式化字符串 (参数为数组 ...

  2. The First BoKe

    A.如何看待师生关系 说起师生关系,我们每个人都有不同的见解,但无一例外,师者,传道授业解惑也,老师的为学生传授的才能知识,是学生今后发展的宝贵财富,无论是从哪方面,都可以对学生起着积极向上的作用.而 ...

  3. 记录使用 Cake 进行构建并制作 nuget 包

    书接上一回(https://www.cnblogs.com/h82258652/p/4898983.html)?[手动狗头] 前段时间折腾了一下,总算是把我自己的图片缓存控件(https://gith ...

  4. java基础要点总结

    无意间看到youtube上的一组java基础的视频,顺便做了笔记,整理如下: 出处: 作者:Edward Shi 视频链接:https://www.youtube.com/watch?v=IQE9jH ...

  5. mac下安装安卓开发环境

    对于做ios的人来说,安装安卓开发环境,最好是在mac下安装了,我的mac是10.8.2,64位系统的 安卓开发环境需要下面几个东西: 1 jdk(mac下已经默认有了,可以在命令提示符下输入java ...

  6. Android 从浏览器启动应用

    核心逻辑为AndroidMainfest.xml里面的指定Activity里增加配置: <intent-filter> <data android:scheme="***& ...

  7. Spring IOC容器的实现原理

    1 概述 1.1 依赖反转模式 在Java中,一个复杂的功能一般都需要由两个或者两个以上的类通过彼此合作来实现业务逻辑的,这使得每个对象都需要与其合作的对象的引用.如果这个获取依赖对象的过程需要自己去 ...

  8. 故事描述SVM----支持向量机/support vector machine (SVM)

    作者:简之链接:https://www.zhihu.com/question/21094489/answer/86273196来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  9. Win10 Hyper-v下虚拟机使用无线网络

    首先要承认一点的是写这个随笔更大的初衷是想吐槽,搜了半天,全是一种方法,就是创建一个新的网络适配器,配置为外部网络啥啥啥,用倒是能用,就是网速那叫一个感人,我的是电信百兆光纤网页打开都如蜗牛爬,无法忍 ...

  10. 内存管理cpuset,mempolicy[原理]

    介绍cpuset,mbind,set_mempolicy在内存管理上的应用 change log :确定先从mempolicy的man 手册翻译开始研究,计划如下 .先从man手册入手,通过实现mem ...