<!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-3： 查询（一）

    一.简介 MongoDB提供了db.collection.find() 方法可以实现根据条件查询和指定使用投影运算符返回的字段省略此参数返回匹配文档中的所有字段. 二．db.collection.fi ...

  2. windows下的Mysql安装与基本使用(msi)

    一.安装方式 1.msi(其他版本:https://www.cnblogs.com/zjiacun/p/6653891.html) 2.zip 这里我们用msi吧,只是单纯练习的话,简单很多 二.ms ...

  3. [转载]有经验的Java开发者和架构师容易犯的10个错误

    首先允许我们问一个严肃的问题?为什么Java初学者能够方便的从网上找到相对应的开发建议呢?每当我去网上搜索想要的建议的时候,我总是能发现一大堆是关于基本入门的教程.书籍以及资源.同样也发现网上到处充斥 ...

  4. appium入门基础

    1. 建立session时常用命令: DesiredCapabilities cap = new DesiredCapabilities(); cap.SetCapability("brow ...

  5. LeetCode：N叉树的后序遍历【590】

    LeetCode:N叉树的后序遍历[590] 题目描述 给定一个 N 叉树,返回其节点值的后序遍历. 例如,给定一个 3叉树 : 返回其后序遍历: [5,6,3,2,4,1]. 题目分析 这道题有好几 ...

  6. 对 Java Integer.valueOf() 的一些了解

    从一道选择题开始 分析 选项A   选项A中比较的是i01和i02,Integer i01=59这里涉及到自动装箱过程,59是整型常量,经包装使其产生一个引用并存在栈中指向这个整型常量所占的内存,这时 ...

  7. hadoop27---netty中handler的执行顺序

    Netty是基于Java NIO的网络应用框架. Netty是一个NIO client-server(客户端服务器)框架,使用Netty可以快速开发网络应用,例如服务器和客户端协议.Netty提供了一 ...

  8. c#中的控件01

    1.常用控件: 只读文本:TextBlock.文本框:TextBox.按钮:Button 事件:鼠标移到按钮上的时候显示“大爷您来了”,离开 显示“大爷常来”,Click(点击).Loaded(控件加 ...

  9. QMesageBox的使用

    一.使用构造函数弹出对话框 1. QMessageBox msgBox://最简单的对话框,里面什么也没有 QString str = “test”: msgBox.setText(str); msg ...

  10. COS-2OS结构和硬件支持

    操作系统(Operating System,简称OS),是电子计算机系统中负责支撑应用程序运行环境以及用户操作环境的系统软件,同时也是计算机系统的核心与基石.它的职责常包括对硬件的直接监管.对各种计算 ...