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

代码如下：

 <!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. port bridge enable命令导致的环路

    1.故障描述 前几天机房一台连接数据中心与核心交换的交换机宕机(硬件故障),机房有备用的设备,随即更换(配置也是早就配置好了的),但是下午就出现数据中心网络丢包问题,表现为存在mac漂移 2.拓扑 核 ...

  2. scrapy 爬虫返回json格式内容unicode编码转换为中文的问题解决

    最近在基于python3.6.5 的环境使用scrapy框架爬虫获取json数据,返回的数据是unicode格式的,在spider里面的parse接口中打印response.text出来如下: cla ...

  3. # Do—Now——团队冲刺博客_总结篇

    Do-Now--团队冲刺博客_总结篇 目录 博客链接 作者 1. 第一篇(领航篇) @仇夏 2. 第二篇 @侯泽洋 3. 第三篇 @仇夏 4. 第四篇 @周亚杰 5. 第五篇 @唐才铭 6. 第六篇 ...

  4. MongDB增删改查

    增加 增加一条:db.th.insertOne({}) // 返回 _id 增加多条:db.th.insertMany([{},{},{}]) // 返回 _ids 针对Array增加操作: db.s ...

  5. 《SpringMVC从入门到放肆》六、SpringMVC开发Controller的方法总结

    到目前为止我们已经大概学习了StringMVC的执行流程,以及详细的处理器映射器和处理器适配器的执行流程,并可以自己写一个配置方式开发的小Demo了.今天我们来总结一下实现一个Controller的几 ...

  6. day 25 二十五、抽象类、多态、鸭子、反射、异常处理

    一.接口思想 1.接口:建立关联的桥梁,方便管理代码 python中没有接口语法 def jiao(): pass def chi(): pass def pao(): pass # 清晰知道操作的功 ...

  7. Python全栈-magedu-2018-笔记7

    第三章 - Python 内置数据结构 线性结构 线性结构 可迭代 for ... in len()可以获取长度 通过下标可以访问 可以切片 学过的线性结构 列表.元组.字符串.bytes.bytea ...

  8. 20165311 《网络对抗技术》 Kali安装

    一.目的要求 下载 安装 网络 共享 软件源 二.主要步骤 从官网下载软件安装包 安装的比较顺利 具体截图就不放上来了 安装结果图: 网络配置和共享文件夹设置 网络配置: 由于我之前安装虚拟机,所以并 ...

  9. 学习ActiveMQ(三)：发布/订阅模式(topic)演示

    1.在这个项目中新增两个java类,主题生产者和主题消费者: 2.和点对点的代码差别并不大,所以将消费者和生产者的分别代码拷入新增的java类中,再修改就好了. appProducerTopic代码: ...

  10. p12文件和mobileprovision文件

    http://www.cnblogs.com/YouXianMing/p/3848188.html https://www.jianshu.com/p/73c430f468e8 https://blo ...