<!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. 前端基础-css（1）

    一.css的引入方式 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面 ...

  2. filebeat 简介安装

    Filebeat is a lightweight shipper for forwarding and centralizing log data. Installed as an agent on ...

  3. linux进程内存到底怎么看 剖析top命令显示的VIRT RES SHR值

    引 言: top命令作为Linux下最常用的性能分析工具之一,可以监控.收集进程的CPU.IO.内存使用情况.比如我们可以通过top命令获得一个进程使用了多少虚拟内存(VIRT).物理内存(RES). ...

  4. pycharm修改配置

    恢复pycharm的初始设置

  5. Phpstorm 换行设置（复制 http://jingyan.baidu.com/article/86fae346b2cb673c49121ad3.html）

    很多时候代码太长超出了屏幕的宽度,默认情况下没有自动换行的,我们需要把光标往后挪,才能看到后面代码,显得略为蛋疼,我个人比较喜欢能够自动换行. 下面就说下Phpstorm里如何默认开启自动换行(use ...

  6. XML约束技术

    为了使XML文档规范化,对XML文档的书写进行约束 XML DTD XML文档(test.xml) <?xml version="1.0" encoding="ut ...

  7. Jsoup学习总结

    Jsoup学习总结 摘要 Jsoup是一款比较好的Java版HTML解析器.可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方 ...

  8. 基于Bootstrap的jQuery登录表单

    在线演示 本地下载

  9. c刷新缓冲区

    int c; while((c = getchar()) != '\n' && c != EOF);

  10. QT的基本数据类型

    QT的基本数据类型(转) qint8:signed char 有符号8比特数据 qint16:signed short 16位数据类型 qint32:signed int. 32位有符号数据类型 qi ...