vue中class样式与内联样式的绑定

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>vue样式</title>

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

    <style>

        .red{

            background-color:red;

        }

        .color{

            color: green;

        }

    </style>

</head>

<body>

    <div class="app">

        <h1 :class="['red','color']">我是一个样式</h1>

        <!-- 注意需要使用v-bind进行属性绑定 -->

        <h1 :class="[flag?'red':'']">我是一个样式</h1>

        <!-- 使用三元表达式进行样式设定 -->

        <h1 :class="[{'color':flag}]">我是一个样式</h1>

        <!-- 使用一个对象代替三元表达式，增加代码的可读性 -->

        <h1 :class="[{'red':true,'color':true}]">我是一个样式</h1>

        <!-- 直接使用对象进行样式设定 -->

        <h1 :class="obj">我是一个样式</h1>

        <!-- 直接在vm对象中读取样式数据 -->

        <!-- *************************以上是通过class来绑定样式***************************** -->

        <!-- *************************以下是通过内联样式style来绑定样式***************************** -->

        <h1 :style="{color:'gray','font-weight':100}">我是一个样式</h1>

        <!-- 注意当属性名称中含有-时，需要加单引号 -->

        <h1 :style="obj2">我是一个样式</h1>

        <!-- 直接使用data中的样式对象设定 -->

        <h1 :style="[obj2,obj3]">我是一个样式</h1>

        <!-- 以数组的形式将多个样式对象添加到页面中 -->

    </div>

    <script>

        var vm = new Vue({

            el:'.app',

            data:{

                flag:true,

                obj:{'red':true,'color':true},

                obj2:{color:'gray','font-weight':100},

                obj3:{'font-style':'italic'}

            }

        })

    </script>

</body>

</html>

vue.js（7）--vue中的样式绑定的更多相关文章

  1. Vue.js学习 Item6 -- Class 与 样式绑定

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

  2. Vue.js学习笔记 第二篇 样式绑定

    Class绑定的对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. 3-5 Vue中的样式绑定

    Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...

  4. 坑！vue.js在ios9中失效

    坑!vue.js在ios9中失效! 接到实现,在移动端生成一个分享链接,分享到微信,在微信中打开,加入! 好,用vue实现----------------------->写代码--------- ...

  5. Vue.js起手式+Vue小作品实战

    本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...

  6. js 引入Vue.js实现vue效果

    拆分组件为单个js见:https://www.jianshu.com/p/2f0335818ceb 效果 html <!DOCTYPE html> <html> <hea ...

  7. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  8. vue中的样式绑定

    样式绑定 样式绑定有class绑定和style绑定,这里我们分别说说 class绑定 class样式绑定与有两种语法:对象语法(v-bind:class='{active:isActive}').数组 ...

  9. 首个vue.js项目收尾中……

    前言: 4.26号入手vue.js+elementUI,迄今为止我们的工作应该可以暂时告一段落了:下周开始,又是新的“征程”. 过程:站在接近完成的角度来看这个项目,似乎的确有许多事情需要自己阐述. ...

随机推荐

  1. [AHOI2008]紧急集合 / 聚会（LCA）

    [AHOI2008]紧急集合 / 聚会 题目描述 欢乐岛上有个非常好玩的游戏,叫做"紧急集合".在岛上分散有N个等待点,有N-1条道路连接着它们,每一条道路都连接某两个等待点,且通 ...

  2. C++中的const_cast

    开发环境 Qt Creator 4.8.2 编译器版本 MinGw 32-bit const_cast 用法: const_cast<type_id> (expression) 说明: 该 ...

  3. Ts 的类

    TS 中的公共.私有和受保护的修饰符: 1.public表示公共的,用来指定在创建实例后可以通过实例访问的,也就是类定义的外部可以访问的属性和方法.默认是 public 2.private修饰符表示私 ...

  4. 使用Node，Vue和ElasticSearch构建实时搜索引擎

    (译者注:相关阅读:node.js,vue.js,Elasticsearch) 介绍 Elasticsearch是一个分布式的RESTful搜索和分析引擎,能够解决越来越多的用例. Elasticse ...

  5. 前端每日实战：32# 视频演示如何用纯 CSS 创作六边形按钮特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xjoOeM 可交互视频教程 此视频 ...

  6. django权限之二级菜单

    遗漏知识点 1.构建表结构时,谁被关联谁就是主表,在层级删除的时候,删除子表的时候,主表不会被删除,反之删除主表的话,字表也会被删除, 使用related_name=None   反向查询,起名用的 ...

  7. 使用vue进行国际化

    相对于网站等一些需求 我们有需要做国际化的需求,具体步骤如下: 首先安装 vue-i18n npm install vue-i18n import VueI18n from 'vue-i18n' Vu ...

  8. Django2 + ORM 做一个简单的登陆

    . ├── db.sqlite3 ├── manage.py ├── myormLogin │   ├── __init__.py │   ├── __pycache__ │   │   ├── __ ...

  9. 5G即将到来！我们需要一部怎样的手机呢？

    随着5G技术研发试验即将于年底宣告完成,也就意味着2019年起,5G商用将会宣布启动,现在OPPO.vivo.小米.华为.一加等众多手机厂商也宣布启动5G计划,这时5G势必会掀起一股新鲜的血液,5G手 ...

  10. Angular：OnPush变化检测策略介绍

    在OnPush策略下,Angular不会运行变化检测(Change Detection ),除非组件的input接收到了新值.接收到新值的意思是,input的值或者引用发生了变化.这样听起来不好理解, ...