vue---class和style的基本用法
不多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的基本用法的更多相关文章
- Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令
自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...
- vue class与style绑定、条件渲染、列表渲染
列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...
- 跨平台移动开发 Xuijs超轻量级的框架Style CSS属性用法
PhoneGap里面推荐使用的超轻量级的框架 Style CSS属性用法 设置css属性:setstyle 通过ID设置css属性 x$('#top1').setStyle('color', '#DB ...
- vue文件中style标签的几个标识符
.vue文件中style标签的几个标识符 在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救. 卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法. 问题背景 问题由 ...
- vue框架中props的typescript用法
vue框架中props的typescript用法 在vue中使用typescript时,需要引入vue-property-decorator库来兼容格式. javascript写法 Vue.compo ...
- Vue#Class 与 Style 绑定
绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...
- vue class与style 绑定详解——小白速会
一.绑定class的几种方式 1.对象语法 直接看例子: <div id="app3"> <div :class="{'success':isSucce ...
- VUE温习：style层次分析
一.vue样式style层次分析 1.样式可以在main.js.模块js文件.组件style.组件script标签内,index.html文件内引入,不同位置引入的样式有什么关系. 2.总结: (1) ...
- 09.vue中样式-style
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 常规操作系统Windows系统淋雨系统Unix系统netware等系统介绍分析
服务器操作系统有有很多,比如说:Windows.Linux.Unix和Netware......但我们经常用过仅有Windows和Linux.下面简单为大家介绍一下常见服务器操作系统. 1.Windo ...
- Windows Azure系列公开课 - 第二课：为什么选择Windows Azure（下）
Windows Azure中有什么? |基础结构 Windows Azure能够根据您企业的需求提供最适合的基础结构,并且在业务发展或精简时能够根据变化的需求及时的做出改变.您可以将Windows A ...
- 微软在WPC 2015中为“伙伴们”带来了什么？
在微软 WPC 2015(微软全球合作伙伴大会)上,微软全球渠道总监 Phil Sorgen 指出,微软总营收的 92% 来自合作伙伴.这句话验证了微软与合作伙伴间日益紧密的合作关系,也点出了本次大会 ...
- 从golang-gin-realworld-example-app项目学写httpapi (二)
https://github.com/gothinkster/golang-gin-realworld-example-app/blob/master/users/models.go 模型定义 use ...
- 自动化测试基础篇--Selenium unittest简介
一.什么是unittest unittest是Python单元测试框架,类似于JUnit框架. unittest中有4个重要的概念:test fixture, test case, test suit ...
- Ionic微信开发之环境配置
在开发微信版的H5页面时,如果需要正常调用微信公众号的开放接口(测试或者发布情况),根据官方要求需要保证网页域名和后端维护的一致.因此,进行真服测试就显得很有必要.WebStorm提供了实时远程部署的 ...
- 用ISA2006配置单网卡缓存服务器
有些公司在部署ISA服务器之前已经有了自己的网络访问解决方案,例如通过硬件防火墙访问互联网,如果这种网络访问解决方案运行效果较好,公司就未必希望用ISA来替代当前的方案,毕竟稳定是第一位的.但在这种情 ...
- 搭建spring boot+elasticsearch+activemq服务
目前时间是:2017-01-24 本文不涉及activemq的安装 需求 activemq实时传递数据至服务 elasticsearch做索引 对外开放查询接口 完成全文检索 环境 jdk:1.8 s ...
- itertools 迭代
itertools模块提供的全部是处理迭代功能的函数,它们的返回值不是list,而是Iterator,只有用for循环迭代的时候才真正计算. >>> import itertools ...
- 奇怪的bug，不懂Atom在添加markdown-themeable-pdf，在配置好phantomjs的情况下报错
本来打算用一下atom但是导出pdf报错,可是在预览的情况下就没有问题,顺便吐槽一下谷歌浏览器自己的markdown在线预览插件无法适配,用搜狗搭载谷歌的插件才能导出pdf,一下感觉逼格少了很多,等忙 ...