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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>vue样式</title>
  8.     <script src="../lib/vue.js"></script>
  9.     <style>
  10.         .red{
  11.             background-color:red;
  12.         }
  13.         .color{
  14.             color: green;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div class="app">
  20.         <h1 :class="['red','color']">我是一个样式</h1>
  21.         <!-- 注意需要使用v-bind进行属性绑定 -->
  22.  
  23.         <h1 :class="[flag?'red':'']">我是一个样式</h1>
  24.         <!-- 使用三元表达式进行样式设定 -->
  25.  
  26.         <h1 :class="[{'color':flag}]">我是一个样式</h1>
  27.         <!-- 使用一个对象代替三元表达式，增加代码的可读性 -->
  28.  
  29.         <h1 :class="[{'red':true,'color':true}]">我是一个样式</h1>
  30.         <!-- 直接使用对象进行样式设定 -->
  31.  
  32.         <h1 :class="obj">我是一个样式</h1>
  33.         <!-- 直接在vm对象中读取样式数据 -->
  34.         <!-- *************************以上是通过class来绑定样式***************************** -->
  35.  
  36.         <!-- *************************以下是通过内联样式style来绑定样式***************************** -->
  37.         <h1 :style="{color:'gray','font-weight':100}">我是一个样式</h1>
  38.         <!-- 注意当属性名称中含有-时，需要加单引号 -->
  39.  
  40.         <h1 :style="obj2">我是一个样式</h1>
  41.         <!-- 直接使用data中的样式对象设定 -->
  42.  
  43.         <h1 :style="[obj2,obj3]">我是一个样式</h1>
  44.         <!-- 以数组的形式将多个样式对象添加到页面中 -->
  45.     </div>
  46.     <script>
  47.         var vm = new Vue({
  48.             el:'.app',
  49.             data:{
  50.                 flag:true,
  51.                 obj:{'red':true,'color':true},
  52.                 obj2:{color:'gray','font-weight':100},
  53.                 obj3:{'font-style':'italic'}
  54.             }
  55.         })
  56.     </script>
  57. </body>
  58. </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. 【串线篇】spring boot配置嵌入式servlet容器

    SpringBoot默认使用Tomcat作为嵌入式的Servlet容器 问题? 一.如何定制和修改Servlet容器的相关配置 1.方法1修改和server有关的配置(ServerProperties ...

  2. Nginx-常用命令和配置文件

    Nginx常用命令 1.启动命令 在/usr/local/nginx/sbin 目录下执行 ./nginx 2.关闭命令 在/usr/local/nginx/sbin 目录下执行 ./nginx s ...

  3. [POJ1772] Substract

    问题描述 We are given a sequence of N positive integers a = [a1, a2, ..., aN] on which we can perform co ...

  4. field.getModifiers() 返回值

    field.getModifiers() 返回值 public static final  的值是 25 private 的值是2  测试如下 Class clazz=MyModel.class; F ...

  5. webApp 页面布局

    1. 流式布局 概念:流式布局是页面元素宽度按照屏幕分辨率进行适配调整,但是整体布局不变. 设计方法:布局都是通过百分比来定义宽度,但是高度大都是用px固定的. 弊端: 虽然可以让各种屏幕适配,但是显 ...

  6. 【进阶技术】一篇文章搞掂：Spring Cloud Stream

    本文总结自官方文档http://cloud.spring.io/spring-cloud-static/spring-cloud-stream/2.1.0.RC3/single/spring-clou ...

  7. python之面向过程，函数式编程，面向对象浅析

    python编程有面向过程.面向函数.面向对象三种,那么他们区别在哪呢?这个问题,让我想起我在学习编程的时候,我的老师给我举的例子.分享给大家. 面向过程就是将编程当成是做一件事,要按步骤完成! 比如 ...

  8. List of yellow pages

    List of yellow pages From Wikipedia, the free encyclopedia   [hide]This article has multiple issues. ...

  9. EZOJ #386 最小生成树

    分析 先建出最小生成树 之后每次倍增找环即可 代码 #include<bits/stdc++.h> using namespace std; #define int long long s ...

  10. day07——css布局解决方案之居中布局

     转行学开发,代码100天——2018-03-23 1.水平居中 使用inline-block + text-align方法 先将子框由块级元素改为行内块元素,再通过设置行内块元素居中以实现水平居中 ...