<!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. MongoDB-6： MongoDB索引

    一.简介 在MongoDB建立索引能提高查询效率,只需要扫描索引只存储的这个集合的一小部分,并只把这小部分加载到内存中,效率大大的提高,如果没有建立索引,在查询时,MongoDB必须执行全表扫描,在数 ...

  2. 使用Ehcache缓存同步启动时抛出异常net.sf.ehcache.CacheException: Can't assign requested address

    这个问题在插入公司内网网线的时候不会复现,由于我使用的是公司无线网络,故导致此问题. 具体解决办法是:在启动服务时,指定使用默认ipv4的网络接口.可以在启动jvm时添加参数-Djava.net.pr ...

  3. 解读tensorflow之rnn 的示例 ptb_word_lm.py

    这两天想搞清楚用tensorflow来实现rnn/lstm如何做,但是google了半天,发现tf在rnn方面的实现代码或者教程都太少了,仅有的几个教程讲的又过于简单.没办法,只能亲自动手一步步研究官 ...

  4. 添加github ssh 公钥

    1.在控制台输入命令: ssh-keygen -t rsa -C "github上的邮箱地址" 2.将公匙复制后添加到github网站:    id_rsa.pub文件 3.测试是 ...

  5. 如何根据一些参数，自动生成一个简单的maven工程，然后导入Eclipse直接使用？（maven命令）

    1. 使用mvn archetype:generate命令 2. 选择archetype类型:(默认是org.apache.maven.archetypes:maven-archetype-quick ...

  6. Redis——安装

    Linux下面: 下载安装包: wget http://download.redis.io/releases/redis-4.0.10.tar.gz 解压: tar xzf redis-4.0.10. ...

  7. PHP如何实现验证码

    现在来说说简单的纯数字验证码吧. 如果是初学者,建议按照我代码的注释 //数字 一步步来.最简单的方法,还是把整个代码复制走了. 新建一个captcha.php: <?php //11>设 ...

  8. python学习笔记：函数参数

    1. 位置参数:一般的参数 2. 默认参数: def power(x, n=2): s = 1 while n > 0: n = n - 1 s = s * x return s 参数里有默认赋 ...

  9. clipbrd剪切板查看器

    本文,我们来学习一下简单的概念,即,如何查看系统剪贴版里面有什么内容?   如果要想看.或者验证系统剪贴版里面都有什么内容,最为简单的方法就是通过"粘贴"的操作来验证!   但是, ...

  10. 运维必备技能 WEB 日志分析

    文章节选自<Netkiller Monitoring 手札> 20.2. Web 20.2.1. Apache Log 1.查看当天有多少个IP访问: awk '{print $1}' l ...