打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究，相比前一篇的 demo，本次内容多了各种样式在里面，变得稍微花哨了些，话不多说，直接上代码吧：

<html>

<head>

    <meta charset="utf-8">

    <title>Vue test</title>

    <style type="text/css">

        body {font-family: Verdana;}

        p { font-family: Times, "Times New Roman", serif;}

        .static.active {color: green; font-size: 35px;}

        div.text-danger {color: red;font-size: 25px;}

        div.active {color: blue;font-family: Verdana;}

    </style>

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

</head>

<body>

<div id="app">

  <!-- Create an instance of the todo-item component -->

  <todo-item></todo-item>

</div>

<div class="static"

     v-bind:class="{ active: isActive, 'text-danger': hasError }">

     <p>class property set.</p>

</div>

<div id="app3"

     v-bind:class="[activeClass,errorClass]">

     <p>group class property set.</p>

</div>

<div id="app4" v-bind:class="[isActive ? 'active' : 'text-danger']">

    <p>三元表达式加样式</p>

</div>

<div id="app5">

    <my-component v-bind:class="{ active: isActive }"></my-component>

</div>

<div id="app6">

    <p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">绑定内联样式</p>

    <p v-bind:style="styleObject">对象样式绑定</p>

</div>

<script>

Vue.component('todo-item', {

  template: '<p>todo test.</p>'

})

// 一定要实例化才能用

var app = new Vue({

  el: '#app'

})

// 用类选择器构造一个Vue对象并绑定额外的class属性

var app2 = new Vue({

    el: '.static',

    data: {

        isActive: false,

        hasError: true

    }

})

// 数组语法加 class (因为是从下往上拿样式，所以text-danger的color样式被覆盖)

var app3 = new Vue({

    el: '#app3',

    data: {

        activeClass: 'active',

        errorClass: 'text-danger'

    }

})

var app4 = new Vue({

    el: '#app4',

    data: {

        isActive: true

    }

})

Vue.component('my-component',{

    template: '<p class="static">在已经定义好样式的自定义组件上加样式</p>'

})

var app5 = new Vue({

    el: '#app5',

    data: {

        isActive: true

    }

})

// 绑定内联样式

var app6 = new Vue({

    el: '#app6',

    data: {

        activeColor: '#FF00FF',

        fontSize: 30,

        styleObject: {

            color: '#585858',

            fontSize: '25px'

        }

    }

})

</script>

</body>

</html>

web前端——Vue.js基础学习之class与样式绑定的更多相关文章

  1. web前端——Vue.js基础学习

    近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...

  2. Web前端-Vue.js必备框架（五）

    Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...

  3. Web前端-Vue.js必备框架（四）

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

  4. Web前端-Vue.js必备框架（三）

    Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...

  5. Web前端-Vue.js必备框架（二）

    Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...

  6. Web前端-Vue.js必备框架（一）

    Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  7. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  8. Web - 前端 Vue.js （1）

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使 ...

  9. 两万字Vue.js基础学习笔记（二）

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

随机推荐

  1. 2.原子变量 CAS算法

    前面提到,使用volatile无法保证 变量状态的原子性操作,所谓原子性,就是不可再分 如:i++的原子性问题,i++ 的操作实际上分为三个步骤  "读-改-写" (1)保存i的值 ...

  2. vue源码实现的整体流程解析

    一.前言 最近一直在使用vue做项目,闲暇之余查阅了一些关于vue实现原理的资料,一方面对所了解到的知识做个总结,另外一方面希望能对看到此文章的同学有所帮助.本文如有不足之处,还请过往的大佬批评指正. ...

  3. JAVA中对象的克隆及深拷贝和浅拷贝

    使用场景: 在日常的编程过程 中,经常会遇到,有一个对象OA,在某一时间点OA中已经包含了一些有效值 ,此时可能会需一个和OA完全相对的新对象OB,并且要在后面的操作中对OB的任何改动都不会影响到OA ...

  4. DNSMaper 一款子域名枚举与地图标记工具

    DNSMaper DNSMaper拥有与众多子域名枚举工具相似的功能,诸如域传送漏洞检测,子域名枚举,IP地址获取 文件说明├── dnsmaper.py(核心代码)├── dnsmapper.png ...

  5. 用js刷剑指offer(数值的整数次方)

    题目描述 给定一个double类型的浮点数base和int类型的整数exponent.求base的exponent次方. 保证base和exponent不同时为0 牛客网链接 思路 快速幂算法,举个例 ...

  6. JavaScript展开操作符(Spread operator)介绍

    本文介绍JavaScript的展开操作符(Spread operator)....本文适合ES6初学者. 你可以通过展开操作符(Spread operator)...扩展一个数组对象和字符串.展开运算 ...

  7. ndk学习之c++语言基础复习----C++线程与智能指针

    线程 线程,有时被称为轻量进程,是程序执行的最小单元. C++11线程: 我们知道平常谈C++线程相关的东东基本都是基于之后要学习的posix相关的,其实在C++11有自己新式创建线程的方法,所以先来 ...

  8. Java字节码整体分析与总结

    上一次[https://www.cnblogs.com/webor2006/p/9508341.html]已经将编译器生成的默认构造方法的字节相关的分析完了,接下来则分析咱们自定义的方法啦,按照顺序来 ...

  9. Java基础 TreeSet()来实现数组的【定制排序】 : Comparable接口(自然排序) 或者 Comparator接口 (定制排序)

    笔记: //排序真麻烦!没有C++里的好用又方便!ORZ!ORZ!数组排序还还自己写个TreeSet()和( Comparable接口(自然排序) 或者 Comparator接口 (定制排序))imp ...

  10. sem_open 信号量操作

    sem_open,计算机用语.意思是创建并初始化有名信号量或打开一个已存在的有名信号量 sem_init:初始化信号量sem_t,初始化的时候可以指定信号量的初始值,以及是否可以在多进程间共享. se ...