<!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样式属性的更多相关文章

  1. vue组件定义方式，vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  2. java中多种方式读文件

    转自:http://www.jb51.net/article/16396.htm java中多种方式读文件 一.多种方式读文件内容. 1.按字节读取文件内容 2.按字符读取文件内容 3.按行读取文件内 ...

  3. vue中使用时间插件、vue使用laydate

    <input id="time1" readonly="readonly" placeholder="这里选择时间" v-model= ...

  4. vue中使用echarts（vue+vue-cli+axios+jsonp+echarts）

    一.安装echarts: cnpm i echarts -D 二.在vue-cli的main.js文件中引用echarts: import charts from 'echarts' Vue.prot ...

  5. CSS控制列表样式属性list-style有哪些？怎么用？

    CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...

  6. 011——VUE中使用object与array控制class

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. java中多种方式解析xml

    第一种:DOM.DOM的全称是Document Object Model,也即文档对象模型.在应用程序中,基于DOM的XML分析器将一个XML文档转换成一个对象模型的集合(通常称DOM树),应用程序正 ...

  8. vue中给请求到的数据对象加属性问题

    今天发现了个很奇怪的问题,我在做一个:点击列表  使点中的列表项变色的功能,而且是多个大列表项,在每个大列表项里点击切换列表项的时候不影响其他大列表项的选项. 解决思路,因为这些大列表项是请求到的数据 ...

  9. vue中，class、内联style绑定、computed属性

    1.绑定Class ①对象语法 <li :class="{ 'active': activeIdx==0 }" @click="fnClickTab(0)" ...

随机推荐

  1. Mysql实现企业级日志管理、备份与恢复

    数据备份形式 文件备份: 通过Linux的备份命令把文件统一打个包存起来,可存在本地和远程服务器,等到要恢复时,再用这些文件恢复到指定位置. 数据库数据备份: 在一些对数据可靠性要求很高的行业如银行. ...

  2. 使用.gitignore忽略文件

    单个项目配置 在.git文件夹同目录下打开git bash,执行命令: touch .gitignore 生成“.gitignore”文件. 在”.gitignore” 文件里输入你要忽略的文件夹及其 ...

  3. laravel相关插件

    1. Laravel-4-Generators Rapidly speed up your Laravel workflow with generators  https://packagist.or ...

  4. insert获取主键、联合关联查询

    联合查询

  5. java @Retention元注解

    @Retention元注解 有三种取值:RetentionPolicy.SOURCE.RetentionPolicy.CLASS.RetentionPolicy.RUNTIME分别对应:Java源文件 ...

  6. 手动创建sql数据表

    createtable  tb (    ID   int IDENTITY (1,1)     notnull, --创建列ID,并且每次新增一条记录就会加1    WokNo            ...

  7. ping主机脚本

    #!/bin/bash #ping net='172.16.1' uphosts=0 downhosts=0 for i in {1..254};do ping -c 1 -w 1 ${net}.${ ...

  8. c语言网络通信杂笔记

    1.sin_addr.s_addr = INADDR_ANY;设置成本地IP 2.pthread_create();线程生成函数 3.在linux下,sleep(1)是睡眠1s

  9. 使用John the ripper工具来尝试破解Linux密码

    这篇文章主要介绍了使用John the ripper工具来尝试破解Linux密码的方法,这款工具可能主要被用来破解系统用户的密码以获得文件操作权限,需要的朋友可以参考下 John有别于Hdra之类的工 ...

  10. linux 挂在新硬盘

    记录一下    全忘了..... PS 测试服务器的主板太差劲了,没有多余的电源接口,只能把光驱的电源拿出来,才能让硬盘使用.把硬盘装好后,我们用 fdisk -l 查看下: 图中可以看出 /dev/ ...