<!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. phalcon—— PHP基础知识(一)

    一.变量和常量 1.1.变量名(标示符) 1)变量:$开头标志 2)变量名:能够由字母.数字,_ 3者组成,不能用数字开头 3)标识符是区分大写和小写的.但函数名不区分大写和小写. 4)变量名称能够与 ...

  2. sql server如何把查询结果发邮件出去

    原本:https://zhidao.baidu.com/question/1819725575342685788.html --1.启用Database Mail扩展存储过程 sp_configure ...

  3. tensorflow 的rnn的示例 ptb_word_lm.py 的完整代码

    其训练数据源在我的空间里,名字为:tensorflow的ptb-word-lm示例的训练数据源.tgz 讲解参见另一篇文章:  http://www.cnblogs.com/welhzh/p/6739 ...

  4. pandas(八)重塑和轴向旋转

    重塑层次化索引 层次化索引为DataFrame的重排提供了良好的一致性操作,主要方法有 stack :将数据的列旋转为行 unstack:将数据的行转换为列 用一个dataframe对象举例 In [ ...

  5. 安卓ios app自动化测试用例模板

    import io.appium.java_client.android.AndroidDriver; import io.appium.java_client.android.AndroidElem ...

  6. iOS学习之NSString

    一.不可变字符 NSString是不可变字符串,它产生的其他字符串方法都是生成一个新的字符串,而不会改变原来字符串. 1.创建方式 //1)字面量,它是常量字符串,存储常量区 NSString *st ...

  7. python全栈开发从入门到放弃之字符编码

    一 了解字符编码的知识储备   1. 计算机基础知识(三幅图)       2. 文本编辑器存取文件的原理(nodepad++,pycharm,word) 打开编辑器就打开了启动了一个进程,是在内存中 ...

  8. Kattis - cokolada【水】

    Kattis - cokolada[水] 题意 有一个人想吃巧克力,但是巧克力都是按照 2 的幂次的数量包装的,然后他想吃一定数量块的巧克力,然后可以敲碎,每次敲碎都分成两半,比如四块装的分成两块就是 ...

  9. Silverlight中获取控件中子控件

    如题:,直接来看代码: /// <summary> /// 查找并返回第一个 相同 name的子元素 /// </summary> /// <typeparam name ...

  10. MySQL SQL Injection(注入)

    如果通过网页接收用户输入,而后再把这些数据插入到数据库中,那么你可能就会碰到 SQL 注入式攻击.本节简要介绍如何防范这种攻击,确保脚本和 MySQL 语句的安全性. 注入式攻击往往发生在要求用户输入 ...