说明：有些部分我只是相当于做一个学习笔记，加强记忆之用。所以可能阅读性不是那么强。如果有参考我这类博客的人，那么请见谅。

代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>vue5</title>

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

     <!--<link rel="stylesheet" type="text/css" href="main.css"/>-->

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

 </head>

 <body>

 <!--class与style是html元素的属性，在vue中应该使用v-bind来设置样式属性-->

 <!--vue.js的v-bind专门对此做了加强，表达式的结果除了字符串，还可以是对象或者数组-->

 <div id="app">

     <!--这里:class等价于v-bind="class",使用了缩写-->

     <!--第一部分-->

     <!--1.为:class设置一个对象，从而可以切换class-->

     <div :class="{classA:isClassA}">this will be orange</div>

     <!--2.我们也可以在对象中传入更多的属性来切换多个class-->

     <!--hasError设置的样式覆盖了isClassA的字体颜色样式-->

     <div :class="{classA:isClassA, hasError:hasError}">this will be red</div>

     <!--3.我们也可以直接绑定数据里的一个对象-->

     <div :class="classObject">this will be same to the second</div>

     <!--4.我们可以绑定返回对象的计算属性；比较常用且强大-->

     <div :class="classObject1">this will be red</div>

     <!--5.我们可以为:class设置一个数组-->

     <div :class="[classB, classC]">this will be red</div>

     <!--6.使用三元表达式来切换class-->

     <div :class="[classB, isClassC? classC :'']">this is red too</div>

     <br>

     <!--第二部分-->

     <!--:style可以用来设置样式-->

     <div :style="{border:border,fontSize:fontSize+'px'}">this is style </div>

     <br>

     <!--:style绑定到样式对象-->

     <div :style="styleObject">this is style2</div>

     <br>

     <!--使用数组将多个样式对象运用到一个元素上-->

     <div :style="[style1,style2]">this is style3</div>

     <!--:style使用需要添加浏览器引擎前缀的css属性时，如transform时，vue.js会自动侦测并添加相关前缀-->

 </div>

 <style>

     #app .classA, #app .isClassA1{

         color: orange;

     }

     #app .hasError, #app .hasError1{

         color: red;

         font-size: 20px;

     }

 </style>

 <script>

     var vm=new Vue({

         el: '#app',

         data:{

             isClassA: true,

             hasError: true,

             classObject:{

                 isClassA1: true,

                 hasError1: true

             },

             classB: 'classA',

             classC: 'hasError',

             isClassC :true,

             border: '1px solid gold',

             fontSize: 20,

             styleObject:{

                 color: 'orange',

                 border: '1px solid black'

             },

             style1:{

                 color:'silver'

             },

             style2:{

                 border:'1px solid gold',

                 fontSize: '20px'

             }

         },

         computed:{

             classObject1:function(){

                 return {

                     classA: this.isClassA && !this.hasError,

                     hasError: this.hasError

                 }

             }

         }

     });

 </script>

 </body>

 </html>

运行结果：

Vue学习4：class与style绑定的更多相关文章

  1. 关于vue.js中class与style绑定的学习

    练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  2. Vue.2.0.5-Class 与 Style 绑定

    Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...

  3. Vue教程：Class 与 Style 绑定（四）

    绑定 HTML Class 对象语法 ①.添加单个class: <div v-bind:class="{ active: isActive }"></div> ...

  4. vue学习笔记 样式 class style（五）

    使用v-bind数据绑定class和style,v-bind:class可以与传统的class属性共存,其中可以用{}设置多个class,根据条件判断的语法是class名:条件,带-的class名需要 ...

  5. Vue学习笔记之表单绑定输入

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

  6. vue 学习三 v-model 表单绑定输入 以及修饰符的用处

    v-model 指定使用过vue的同学都应该是很熟悉的了,这里就不多介绍,本章主要就是记录一些v-model非常实用的修饰符和对于v-model在html文本框,多行文本框,选择框,单选框,复选框上对 ...

  7. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  8. Vue学习（二）：class与style绑定

    <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml&q ...

  9. Vue学习计划基础笔记(三)-class与style绑定,条件渲染和列表渲染

    Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style ...

随机推荐

  1. LOJ.2865.[IOI2018]狼人(Kruskal重构树 主席树)

    LOJ 洛谷 这题不就是Peaks(加强版)或者归程么..这算是\(IOI2018\)撞上\(NOI2018\)的题了? \(Kruskal\)重构树(具体是所有点按从小到大/从大到小的顺序,依次加入 ...

  2. easy-ui 中的事件触发 （tree)

    easy-ui可以为插件添加事件,但没有触发事件的处理(可能是未找到),所以有时候,我们需要通过程序去触发某个插件指定的事件时,就一筹莫展了 以Tree插件为例 ,添加了onClick事件 jQuer ...

  3. 04-Python入门学习-流程控制

    一.流程控制if 语法1: if 条件:  code1  code2  code3  .... age=180 height=163 weight=75 sex='female' is_beautif ...

  4. Java 整数型的进制间的互相转换

    /** * 整数型, 进制间的互相转换 */ public class IntConversion { public static void main(String[] args) { int num ...

  5. 运用了css，js

    代码如下: <!DOCTYPE html><html xmlns="http://www.w3.org/1999/html"><head> &l ...

  6. 《Linux内核原理与分析》第一周作业 20189210

    实验一 Linux系统简介 这一节主要学习了Linux的历史,Linux有关的重要人物以及学习Linux的方法,Linux和Windows的区别.其中学到了LInux中的应用程序大都为开源自由的软件, ...

  7. 数据库 case when then 的用法 （举个栗子~~~）

    select a.TradeType,a.TradeState,a.Pname,a.OutTradeNo,a.*, (CASE a.TradeType when '1' then '充值' when ...

  8. 自动化测试如何使用driver.findElements去操作页面元素

    当你要操作的元素页面有很多个的时候,如下图这样,你想使用".datagrid-row-expander.datagrid-row-expand"这个cssSelector,这个时候 ...

  9. oracle根据某个字段的值进行排序

    需求:按照颜色为蓝色.红色.黄色进行排序: order by  case                  when color = '蓝色' then                   1     ...

  10. Windows下配置node和npm

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效. Node.js 的使用包管理器 ...