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

代码如下：

 <!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. 设计模式之架构型MVC，MVP，MVVM模式

    一.MVCMVC,Model View Controller,是软件架构中最常见的一种设计模式,简单来说就是通过Controller的控制去操作Model层的数据,并且返回给view层展示.View跟 ...

  2. Visual GC提示"不受此JVM支持“解决方案（配置jstatd）

    Visual GC提示"不受此JVM支持“,如果想使用这个插件,就需要配置jstatd连接方式,下面来看jstatd的配置: 1.配置安全策略文件路径$JAVA_HOME/jre/lib/s ...

  3. Django——微信消息推送

    前言 微信公众号的分类 微信消息推送 公众号 已认证公众号 服务号 已认证服务号 企业号 基于:微信认证服务号 主动推送微信消息. 前提:关注服务号 环境:沙箱环境 沙箱环境地址: https://m ...

  4. RHEL5.8安装

    创建完成后新的虚拟机.使用光盘启动后,启动界面如下图. 大概介绍下显示界面内容的意思:     1.To install or upgrade in graphical mde, press the ...

  5. IOS中多线程的总结

    首先要知道线程和进程的区别.一个系统上运行的每一个应用程序都是一个线程.而进程中要执行的任务都是在线程上来实现的,所以说线程是进程的最小执行单元. 进程最少要有一个线程.多线程,顾名思义就是多条线程. ...

  6. mobile_1 物理像素

    1 物理像素 需求: border: 1px solid red; 在移动端 dpr 为 2 的屏幕上,实际上是 2 物理像素.    如何实现 1 物理像素? 首先,肯定不能 border: 0.5 ...

  7. vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航

    路由:就是一个 key 与 value 的映射关系.key 就是 pathh 前台路由的 value 是 Component 组件对象 后台路由的 value 是一个 回调函数 普通链接: 会发送请求 ...

  8. css页面滚动触发动画

    参考页面:http://www.jq22.com/jquery-info1384

  9. swust oj 982

    输出利用二叉树存储的普通树的度 1000(ms) 10000(kb) 2619 / 5991 普通树可转换成相应的二叉树(该二叉树的根结点一定缺少右儿子),反之亦然.故而可以根据相应的转换方法去统计某 ...

  10. js基础--数据类型

    1,数据类型 Number:包括小数与整数,负数,NaN ,Infinity无限大String字符串:‘abc’Boolean布尔值:true or falsenull 空undefined 未定义 ...