不多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. (Stanford CS224d) Deep Learning and NLP课程笔记（一）：Deep NLP

    Stanford大学在2015年开设了一门Deep Learning for Natural Language Processing的课程,广受好评.并在2016年春季再次开课.我将开始这门课程的学习 ...

  2. Servlet映射规范和隐式映射

    问题描述: web.xml中配置了缺省路径"/"后,原先在webapp下的静态页面(html)无法通过URL访问了,为什么? 过程尝试: 1. 将html后缀改为.jsp后可以正常 ...

  3. spring cloud config配置

    参考: http://www.ityouknow.com/springcloud/2017/05/22/springcloud-config-git.html http://www.ityouknow ...

  4. FDFDF

    Linux(Centos)之安装Nginx及注意事项   1.Nginx的简单说明 a.  Nginx是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器,期初开发的目的 ...

  5. TMG 2010 为HTTPS协议添加非标准端口（443）

    1.添加加密端口时,编辑脚本addsslports.vbs  addsslports.vbs 脚本内容如下: Dim root Dim tpRanges Dim newRange Set root = ...

  6. 内置模块之os

    os模块主要对操作系统进行调用的接口 一.os模块常用方法和属性 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("d:") 改变 ...

  7. Linq to Entities，ADO.NET Entity Framework 模型优先

    一.概念: Database First(数据库优先):存在的DB------------->生成Data Model  .edmx文件 Model First(模型优先):Data Model ...

  8. PetaPoco轻量级ORM框架 - 对Database类的进行扩展，可以返回Table格式数据

    一.有时我们需要将常用的功能添加到PetaPoco中的Database类中 实现方式有2种,以下以查询字段为例 1.通过扩展方式实现,此方式不改变被调用(Database)类名(只能增加方法) pub ...

  9. Linux的图形模式和文本模式以及单用户模式切换

    1.默认开机进入文本模式 如果想让开机自动进纯文本模式, 修改/etc/inittab 找到其中的 id:5:initdefault: 这行指示启动时的运行级是5,也就是图形模式 改成3就是文本模式了 ...

  10. 前端——实用UI组件库

    Angular UI 组件 ngx-bootstrap 是一套Bootstrap 组件 官网:https://valor-software.com/ngx-bootstrap/#/ github: h ...