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 ...
随机推荐
- RestTemplate之GET和POST调用和异步回调
get方式 String url = "http://hostname:port/v1.0/data/data"; HttpHeaders headers = new HttpHe ...
- 基于git命令的代码统计方法
基于git命令的代码统计方法 没什么好说的,基于git log命令,使用前提是安装了git ...... .统计所有人代码量 统计所有人代码增删量,拷贝如下命令,直接在git bash等终端,git项 ...
- 解决 安装VMwanre tools时 Enter the path to the kernel header files for the 3.10.0-862.14.4.el7.x86_64 kernel
1.使用ctrl+z停止安装vmtools安装 2.然后yum升级kernel-devel yum -y install kernel-devel
- 第二天学习笔记：(MDN HTML学习、web安全策略与常见攻击、语义化)
一:Web入门 1:web文件命名 在文件名中应使用连字符(-).搜索引擎把连字符当作一个词的分隔符, 但不会以这种方式处理下划线. 养成在文件夹和文件名中使用小写,并且使用短横线而不是空格来分隔的习 ...
- [oracle] Oracle存储过程里操作BLOB的字节数据的办法，例如写入32位整数
作者: zyl910 一.缘由 BLOB是指二进制大对象,也就是英文Binary Large Object的缩写. 在很多时候,我们是通过其他编程语言(如Java)访问BLOB的字节数据,进行字节级的 ...
- Docker Mongo数据库开启用户认证
一.启动mongo容器的几种方式 #简化版 docker run --name mongo1 -p 21117:27017 -d mongo --noprealloc --smallfiles #自定 ...
- 读吴恩达算-EM算法笔记
最近感觉对EM算法有一点遗忘,在表述的时候,还是有一点说不清,于是重新去看了这篇<CS229 Lecture notes>笔记. 于是有了这篇小札. 关于Jensen's inequali ...
- 2017年PHP程序员未来路在何方
PHP 从诞生到现在已经有20多年历史,从Web时代兴起到移动互联网退潮,互联网领域各种编程语言和技术层出不穷, Node.js . GO . Python 不断地在挑战 PHP 的地位.这些技术的推 ...
- C#中IEnumerable、ICollection、IList、List之间的区别
IEnumerable.ICollection.IList.List之间的区别,本文分别分析了它的实现源码,从而总结出了它们之间的关系和不同之处. 首先我看看 IEnumerable: // 摘要: ...
- 史上最简单的 SpringCloud 教程 | 终章
https://blog.csdn.net/forezp/article/details/70148833转载请标明出处:http://blog.csdn.net/forezp/article/det ...