不多BB了 直接上代码了 通俗移动易懂总结了5种常用改变样式 的形式

  <style>

    .actived2{

      color:red;

    }

  </style>

</head>

<body>

  <div class="app">

    <div :style="actived">aaa</div>

    <div :style="[actived]">aaa</div>

    <div :style="{color:'red'}">aaa</div>

    <div :class="['actived2']">aaa</div>

    <div :class="{actived2:isActived}">aaa</div>

  </div>

</body>

<script>

  const app = new Vue({

    el:'.app',

    data:{

      actived:{

        color:"red"

      },

      isActived:true

    }

  })

</script>

vue---class和style的基本用法的更多相关文章

  1. Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  2. vue class与style绑定、条件渲染、列表渲染

    列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...

  3. 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法

    PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...

  4. vue文件中style标签的几个标识符

    .vue文件中style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由 ...

  5. vue框架中props的typescript用法

    vue框架中props的typescript用法 在vue中使用typescript时,需要引入vue-property-decorator库来兼容格式. javascript写法 Vue.compo ...

  6. Vue#Class 与 Style 绑定

    绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...

  7. vue class与style 绑定详解——小白速会

    一.绑定class的几种方式 1.对象语法 直接看例子: <div id="app3"> <div :class="{'success':isSucce ...

  8. VUE温习：style层次分析

    一.vue样式style层次分析 1.样式可以在main.js.模块js文件.组件style.组件script标签内,index.html文件内引入,不同位置引入的样式有什么关系. 2.总结: (1) ...

  9. 09.vue中样式-style

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 自学git心得-5

    标签管理也是git里面比较重要的一部分内容,我们下载软件的时候经常看到诸如v2.0.v2.3.0这样的版本号,在git里也是一样,有时为了避免分支的名称五花八门而发生混淆的情况,我们常常会 给分支贴上 ...

  2. python文本操作

    file_obj=file("文件路径","模式") 打开文件的模式有: r,以只读方式打开文件 w,打开一个文件只用于写入.如果该文件已存在则将其覆盖.如果该 ...

  3. sqlserver 查询表结构及字段说明

    SELECT [Table Name] = OBJECT_NAME(c.object_id), [Column Name] = c.name, [Description] = ex.value FRO ...

  4. Oracle 完整性约束错误

     错误Caused by: org.hibernate.exception.ConstraintViolationException: Could not execute JDBC batch upd ...

  5. Java学习-1

    数组 运算符 包 访问权限 修饰符 数组 1. 数组的声明: int[] a; 2. 数组的创建 使用new运算符数组的创建int[] a = new int[100] 数组的长度不要求是常量:new ...

  6. 一个“日期”字符串进行比较的case

    项目中有个功能是比较会员是否过期,review同事的代码,发现其写法比较奇葩,但线上竟也未出现bug. 实现大致如下: $expireTime = "2014-05-01 00:00:00& ...

  7. 使用Java语言开发机器学习框架和参数服务器

    https://github.com/wudikua/ps 本项目是我自己动手实现的机器学习训练框架,代码简单,有很多不完善,但是也保留了最小可用功能 通过自己编写这个项目,可以帮助自己入门机器学习 ...

  8. c++抽象类，纯虚函数

  9. 环境变量、block、修饰符：block对环境变量的引用和修改需要通过修饰符来限定

    环境变量.block.修饰符:block对环境变量的引用和修改需要通过修饰符来限定. http://www.cnblogs.com/fengmin/p/5816580.html - (NSUInteg ...

  10. Java50道经典习题-程序22 递归求阶乘

    题目:利用递归方法求5!.分析:递归公式:n*factorial(n-1); public class Prog22 { public static void main(String[] args) ...