一:行间样式 :和绑定其他dom的属性一样, v-bind:style=

         <div v-bind:style={backgroundColor:color}>2</div>    //color是data或者computed的k;
         <div v-bind:style='style1'>1<div>  //整个style1是data的k或者computed的k

<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里的样式添加之行间样式的更多相关文章

  1. [js高手之路] vue系列教程 - 绑定class与行间样式style(6)

    一.绑定class属性的方式 1.通过数组的方式,为元素绑定多个class <style> .red { color:red; /*color:#ff8800;*/ } .bg { bac ...

  2. JavaScript 学习—— js获取行间样式和非行间样式

    1. 问题引入 <head> <style> #div1{ width:150px; height:200px; position:absolute; left:-150px; ...

  3. vue不同序号的元素添加不同的样式

    vue不同序号的元素添加不同的样式 一.总结 一句话总结: 在vue中设计一个样式的数据数组来遍历即可 <script> new Vue({ el:'#review_exam_part', ...

  4. Jquery添加移除样式

    获取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: var p_class = $("p ...

  5. Html-IOS下input的样式添加不上的解决方案

    问题描述: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&qu ...

  6. 获取行间样式与在js中设置样式

    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...

  7. chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式。

    参考blog来自 http://segmentfault.com/q/1010000000671971 chrome浏览器当表单自动填充时,怎么去除浏览器自动添加的默认样式. 一.发现该问题的原因-是 ...

  8. HTML&CSS基础学习笔记1.28-给网页添加一个css样式

    CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...

  9. JavaScript获取css 行间样式,内连样式和外链样式的方式

    [行间样式获取] <div id='div1' style="backgroud:red">测试</div> <script> var odiv ...

随机推荐

  1. [web前端] css3 transition属性实现3d动画效果

    cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...

  2. NLP第3章 中文分词技术

  3. (原)matlab导出oracle中blob的jpg数据到图片

    转载请注明出处: https://www.cnblogs.com/darkknightzh/p/10092965.html function write_blob_info(blob) len = b ...

  4. Kettle实现数据抽取、转换、装入和加载数据-数据转移ETL工具

    原文地址:http://www.xue51.com/soft/5341.html Kettle是来自国外的一款开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行,绿色无需 ...

  5. 使用idea对spring boot项目打jar和war包[文件]

    pom.xml文件编写 打JAR包时 <groupId>com.netcorner</groupId> <artifactId>demo</artifactI ...

  6. linux内核剖析(六)Linux系统调用详解(实现机制分析)

    本文介绍了系统调用的一些实现细节.首先分析了系统调用的意义,它们与库函数和应用程序接口(API)有怎样的关系.然后,我们考察了Linux内核如何实现系统调用,以及执行系统调用的连锁反应:陷入内核,传递 ...

  7. [20180312]进程管理其中的SQL Server进程占用内存远远大于SQL server内部统计出来的内存

    sql server 统计出来的内存,不管是这个,还是dbcc memorystatus,和进程管理器中内存差距很大,差不多有70G的差异. 具体原因不止,可能是内存泄漏,目前只能通过重启服务解决   ...

  8. 【Log】SLF4J简单入门

    SLF4J介绍 SLF4J,即简单日志门面(Simple Logging Facade for Java),不是具体的日志解决方案,它只服务于各种各样的日志系统.按照官方的说法,SLF4J是一个用于日 ...

  9. HLS playlist典型示例

    [时间:2018-06] [状态:Open] [关键词:流媒体,HLS,m3u8,playlist,variant, alternate] 0 引言 本文主要是对apple官网上的echnical N ...

  10. AOSP中的HLS协议解析

    [时间:2018-04] [状态:Open] [关键词:流媒体,stream,HLS, AOSP, 源码分析,HttpLiveSource, LiveSession,PlaylistFetcher] ...