vue里的样式添加之行间样式
一：行间样式 ：和绑定其他dom的属性一样， v-bind:style=
<div v-bind:style='[style1,{backgroundColor:"blue",width:"200px"},style2]'>aaa</div>； //style的值是数组，里面的值是data或computed的k
div {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:style='style1'>1<div>
<div v-bind:style='[style1,{backgroundColor:"blue",width:"200px"},style2]'>aaa</div>
<div v-bind:style='demostyle'></div>
<button v-on:click='changeColor'>click</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
color: 'red',
style2: {
fontSize: '30px',
fontWeight: 'bolder'
}
},
computed: {//利用computed来获得，这厉害了，不但可以获取到值（computed的k和data里的k用法一样），
//而且节省了性能,一旦相关值变化，computed里的k会重新计算返回新的值
style1: function () {
return {
height: '100px',
width: '100px',
backgroundColor: this.color //这一句如果在data里是获取不到this.color的
}
}
},
methods: {
changeColor: function () {
this.color = this.color == 'red' ? 'yellow' : 'red';
}
}
})
</script>
vue里的样式添加之行间样式的更多相关文章
- [js高手之路] vue系列教程 - 绑定class与行间样式style(6)
一.绑定class属性的方式 1.通过数组的方式,为元素绑定多个class <style> .red { color:red; /*color:#ff8800;*/ } .bg { bac ...
- JavaScript 学习—— js获取行间样式和非行间样式
1. 问题引入 <head> <style> #div1{ width:150px; height:200px; position:absolute; left:-150px; ...
- vue不同序号的元素添加不同的样式
vue不同序号的元素添加不同的样式 一.总结 一句话总结: 在vue中设计一个样式的数据数组来遍历即可 <script> new Vue({ el:'#review_exam_part', ...
- Jquery添加移除样式
获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: var p_class = $("p ...
- Html-IOS下input的样式添加不上的解决方案
问题描述: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&qu ...
- 获取行间样式与在js中设置样式
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...
- chrome浏览器当表单自动填充时，怎么去除浏览器自动添加的默认样式。
参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是 ...
- HTML&CSS基础学习笔记1.28-给网页添加一个css样式
CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...
- JavaScript获取css 行间样式，内连样式和外链样式的方式
[行间样式获取] <div id='div1' style="backgroud:red">测试</div> <script> var odiv ...
随机推荐
- x264阅读记录-1
x264阅读记录-1 采用x264版本是x264-snapshot-20060316-2245. 1. main函数 x264的main函数位于x264.c中,下面是main函数调用情况: (1)_s ...
- Android CollapsingToolbarLayout使用介绍
我非常喜欢Material Design里折叠工具栏的效果,bilibili Android客户端视频详情页就是采用的这种设计.这篇文章的第二部分我们就通过简单的模仿bilibili视频详情页的实现来 ...
- android： 在APP中显示高德地图SDK
一.搭建环境 参考资料:http://lbs.amap.com/api/android-sdk/guide/create-project/android-studio-create-project ...
- SSH + Google Authenticator 安全加固
1. SSH连接 Secure Shell(安全外壳协议,简称SSH)是一种加密的网络传输协议,可在不安全的网络中为网络服务提供安全的传输环境.SSH通过在网络中创建安全隧道来实现SSH客户端与服务器 ...
- Docker 集群Swarm创建和Swarm Web管理
关于Docker Swarm更多的介绍请查看<Docker管理工具-Swarm部署记录> 一.环境配置 1.安装环境 # cat /etc/redhat-release CentOS Li ...
- mysql分组用法
--select num from 表 group by num --select num from 表 group by num,nid --特别的:group by 必须在where之后,orde ...
- C# WebAPI学习
WebApi是微软在VS2012 MVC4版本中绑定发行的,WebApi是完全基于Restful标准的框架.RestFul: (英文:Representational State Transfer,简 ...
- Spring Boot项目的接口防刷
说明:使用了注解的方式进行对接口防刷的功能,非常高大上,本文章仅供参考 一,技术要点:springboot的基本知识,redis基本操作, 首先是写一个注解类: import java.lang.an ...
- 【转载 Hadoop&Spark 动手实践 2】Hadoop2.7.3 HDFS理论与动手实践
简介 HDFS(Hadoop Distributed File System )Hadoop分布式文件系统.是根据google发表的论文翻版的.论文为GFS(Google File System)Go ...
- 【iCore4 双核心板_ARM】例程二十四：LWIP_DHCP实验——动态分配IP地址
实验现象: 核心代码: int main(void) { system_clock.initialize(); led.initialize(); adc.initialize(); delay.in ...