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 ...
随机推荐
- Java8 利用Lambda处理List集合
List<User> list = new ArrayList<User>(); User user1 = new User("第一位","用户1 ...
- 提升SQLite数据插入效率低、速度慢的方法(转)
前言 SQLite数据库由于其简单.灵活.轻量.开源,已经被越来越多的被应用到中小型应用中.甚至有人说,SQLite完全可以用来取代C语言中的文件读写操作.因此我最近编写有关遥感数据处理的程序的时候, ...
- [Docker] Running Multiple Containers for an Angular, Node project
The code is from Plusight course, github link is here. In this post, we will give a overview about h ...
- linux内存管理之malloc、vmalloc、kmalloc的区别
kmalloc kzalloc vmalloc malloc 和get_free_page()的区别 一.简述 1. kmalloc申请的是较小的连续的物理内存,虚拟地址上也是连续的.kmalloc和 ...
- [转]调试利器-SSH隧道
在开发微信公众号或小程序的时候,由于微信平台规则的限制,部分接口需要通过线上域名才能正常访问.但我们一般都会在本地开发,因为这能快速的看到源码修改后的运行结果.但当涉及到需要调用微信接口时,由于不和你 ...
- 在Visual Studio 2013中安装Mysql for EntityFramework
1. 安装Visual Studio 20132. 下载mysql,安装mysql.3. 下载 mysql-for-visualstudio-1.2.7.msi, 下载链接:https://cdn.m ...
- Linux将yum源设置为阿里云的镜像源
第一步:备份原有镜像源 mv /etc/yum.repo.d/Centos-Base.repo /etc/yum.repo.d/Centos-Base.repo.bak 第二步:下载阿里云的镜像源 w ...
- Convolution卷积算法python以numpy，Matplotlib实现
1:简述 Numpy拥有函数numpy.convolve(a, v, mode='full')[source]¶,通过该函数完成卷积算法并图形化(Matplotlib)实现. 2:卷积定理 原理: 设 ...
- 【原创 深度学习与TensorFlow 动手实践系列 - 3】第三课：卷积神经网络 - 基础篇
[原创 深度学习与TensorFlow 动手实践系列 - 3]第三课:卷积神经网络 - 基础篇 提纲: 1. 链式反向梯度传到 2. 卷积神经网络 - 卷积层 3. 卷积神经网络 - 功能层 4. 实 ...
- layer 关闭当前弹出层
关闭当前框的弹出层 layer.close(layer.index); 刷新父层 parent.location.reload(); // 父页面刷新 关闭iframe 弹出的全屏层 var inde ...