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

代码如下：

 <!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. Python中何时使用断言

    这个问题是如何在一些场景下使用断言表达式,通常会有人误用它,所以我决定写一篇文章来说明何时使用断言,什么时候不用. 为那些还不清楚它的人,Python的assert是用来检查一个条件,如果它为真,就不 ...

  2. XVIII Open Cup named after E.V. Pankratiev. Grand Prix of Siberia

    1. GUI 按题意判断即可. #include<stdio.h> #include<iostream> #include<string.h> #include&l ...

  3. [LeetCode] Design HashMap 设计HashMap

    Design a HashMap without using any built-in hash table libraries. To be specific, your design should ...

  4. KMP Algorithm 字符串匹配算法KMP小结

    这篇小结主要是参考这篇帖子从头到尾彻底理解KMP,不得不佩服原作者,写的真是太详尽了,让博主产生了一种读学术论文的错觉.后来发现原作者是写书的,不由得更加敬佩了.博主不才,尝试着简化一些原帖子的内容, ...

  5. 基于hortonworks的大数据集群环境部署流水

    一.ambari及HDP安装文件下载地址: 1.系统 操作系统:CentOS7 2.软件 本次安装采用最新版本: ambari-2.7.0.0 hdp-3.0.0.0 详细信息及下载地址如下: Amb ...

  6. vuejs 70行代码实现便签功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. C++编程剖析 问题 方案 和设计准则

    1.Set的每个对象为什么会有三个指针? STL中的set使用方法详细!!!! 因为其底层是红黑树实现的,每个节点有两个子节点和一个父节点,所以需要三个指针. Set 与 map的区别是什么? 总的来 ...

  8. sizeof操作符的一些例子

    例一: #include <iostream> using namespace std; class A { public: char c; }; class B { public: in ...

  9. 微信小程序登录流程及解析用户openid session_key，获取用户信息

    为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持.从2018年4月30日开始,小程序与小游戏的体验版.开发版调用 wx.getUserInfo 接口,将无 ...

  10. 44-0-STM32的CAN外设

    1.RS-485 协议主要是把 RS-232 的信号改进成差分信号,从而大大提高了抗干扰特性: 在 RS-485 通讯网络中,节点中的串口控制器使用 RX 与 TX信号线连接到收发器上,而收发器通过差 ...