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 ...
随机推荐
- [web前端] css3 transition属性实现3d动画效果
cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...
- NLP第3章 中文分词技术
- （原）matlab导出oracle中blob的jpg数据到图片
转载请注明出处: https://www.cnblogs.com/darkknightzh/p/10092965.html function write_blob_info(blob) len = b ...
- Kettle实现数据抽取、转换、装入和加载数据-数据转移ETL工具
原文地址:http://www.xue51.com/soft/5341.html Kettle是来自国外的一款开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行,绿色无需 ...
- 使用idea对spring boot项目打jar和war包[文件]
pom.xml文件编写 打JAR包时 <groupId>com.netcorner</groupId> <artifactId>demo</artifactI ...
- linux内核剖析（六）Linux系统调用详解（实现机制分析）
本文介绍了系统调用的一些实现细节.首先分析了系统调用的意义,它们与库函数和应用程序接口(API)有怎样的关系.然后,我们考察了Linux内核如何实现系统调用,以及执行系统调用的连锁反应:陷入内核,传递 ...
- [20180312]进程管理其中的SQL Server进程占用内存远远大于SQL server内部统计出来的内存
sql server 统计出来的内存,不管是这个,还是dbcc memorystatus,和进程管理器中内存差距很大,差不多有70G的差异. 具体原因不止,可能是内存泄漏,目前只能通过重启服务解决 ...
- 【Log】SLF4J简单入门
SLF4J介绍 SLF4J,即简单日志门面(Simple Logging Facade for Java),不是具体的日志解决方案,它只服务于各种各样的日志系统.按照官方的说法,SLF4J是一个用于日 ...
- HLS playlist典型示例
[时间:2018-06] [状态:Open] [关键词:流媒体,HLS,m3u8,playlist,variant, alternate] 0 引言 本文主要是对apple官网上的echnical N ...
- AOSP中的HLS协议解析
[时间:2018-04] [状态:Open] [关键词:流媒体,stream,HLS, AOSP, 源码分析,HttpLiveSource, LiveSession,PlaylistFetcher] ...