013——VUE中多种方式使用VUE控制style样式属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多种方式使用VUE控制style样式属性</title>
<script src="vue.js"></script>
</head>
<body>
<!--使用变量或是字符串定义样式属性-->
<div id="lantian">
<h1 :style="{color:'red',fontSize:size+'px'}">美丽中国</h1>
<h1 :style="{color:red,fontSize:'50px'}">美丽中国</h1>
<hr />
<input type="number" v-model="size" />
<hr />
<!--object变量定义-->
<h2 :style="style">中国美丽</h2> <!--数组定义-->
<h2 :style="[ltcms]">中国美丽</h2> </div>
<script>
var app=new Vue({
el:'#lantian',
data:{
red:'green',
size:20,
style:{
color:'blue',
fontSize:'100px'
},
ltcms:{
color:'#188eee',
backgroundColor:'#999'
}
}
});
</script>
</body>
</html>
013——VUE中多种方式使用VUE控制style样式属性的更多相关文章
- vue组件定义方式，vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- java中多种方式读文件
转自:http://www.jb51.net/article/16396.htm java中多种方式读文件 一.多种方式读文件内容. 1.按字节读取文件内容 2.按字符读取文件内容 3.按行读取文件内 ...
- vue中使用时间插件、vue使用laydate
<input id="time1" readonly="readonly" placeholder="这里选择时间" v-model= ...
- vue中使用echarts（vue+vue-cli+axios+jsonp+echarts）
一.安装echarts: cnpm i echarts -D 二.在vue-cli的main.js文件中引用echarts: import charts from 'echarts' Vue.prot ...
- CSS控制列表样式属性list-style有哪些？怎么用？
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
- 011——VUE中使用object与array控制class
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- java中多种方式解析xml
第一种:DOM.DOM的全称是Document Object Model,也即文档对象模型.在应用程序中,基于DOM的XML分析器将一个XML文档转换成一个对象模型的集合(通常称DOM树),应用程序正 ...
- vue中给请求到的数据对象加属性问题
今天发现了个很奇怪的问题,我在做一个:点击列表 使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项. 解决思路,因为这些大列表项是请求到的数据 ...
- vue中，class、内联style绑定、computed属性
1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)" ...
随机推荐
- Vue（6）- Vue-router进阶、单页面应用（SPA）带来的问题
一.Vue-router进阶 回顾学过的vue-router,并参考官方文档学习嵌套路由等路由相关知识. 二.单页面应用(SPA)带来的问题 1.虽然单页面应用有优点,但是,如果后端不做服务器渲染(h ...
- 安全技能树简版 正式发布——BY 余弦（知道创宇）
之前留意到知道创宇发布的<知道创宇研发技能表>,对自己有很大的启发,最近听说知道创宇的余弦大神创业了(题外话),还发布了<安全技能树简版V1>,仔细研读之后总体感觉不那么复杂了 ...
- android studio本地gradle
1.从网站上下载http://services.gradle.org/distributions/ 2.打开工程里的gradle-wrapper.properties, distributionUrl ...
- MariaDB备份之XtraBackup
一.XtraBackup是由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上惟一一款开源的能够对innodb和xtrabd数据库进行热备的工具.特点: (1)备份过程快速.可靠: ...
- POJ - 2762 Going from u to v or from v to u? (强连通缩点+判断单向连通)
题意:判断一个有向图中的任意两点u.v,是否可以由其中一个点到达另一个点. 分析:这个问题转化以后就是:将该图强连通缩点后再判断其是否是单向连通的.缩点用Tarjan处理强连通分量. 有一个定理是这样 ...
- SqlHelper简单实现（通过Expression和反射）8.Sql Server数据处理类
这个类基本上就是调用EntityHelper,ExpressionHelper和ObjectHelper来进行各种完整SQL的拼接操作. using System; using System.Conf ...
- C# Winform DataGrid 绑定List<> Or ObservableCollection<> 类型无法自动刷新问题
当DataGrid通过绑定List<> Or ObservableCollection<> 类型数据,通过INofityPropertyChanged接口通知数据改变进行刷新无 ...
- c语言单元测试框架--CuTest
1.简介 CuTest是一款微小的C语言单元测试框,是我迄今为止见到的最简洁的测试框架之一,只有2个文件,CuTest.c和CuTest.h,全部代码加起来不到一千行.麻雀虽小,五脏俱全,测试的构建. ...
- 运行报警告UserWarning: Unknown extension is not supported and will be removed warn(msg)
运行python代码,出现如下警告: C:\Users\niko\PycharmProjects\python_new\venv\lib\site-packages\openpyxl\reader\w ...
- menubar下面的选项不可以输入中文
这是一个QT5的bug. 1.不用中文,使用英文: 2.先输入中文,然后在属性Action里面的text里改成中文.