vue 中样式的绑定
1、class的对象绑定
//对应的css
<style>
.active {
color: red;
}
</style> <!--html 对应的代码-->
<div class="container" id="mytest">
<div class="jumbotron">
<!--注意:如果需要添加其他静态的class,那么只要在名称上加上引号即可,否则视为变量处理-->
<div :class="{active:isactive,take:'take'}" @click="change">are you ok???</div>
</div>
</div> //javascript对应的代码
let VM = new Vue({
el: '#mytest',
//对应:class里的值
data: {isactive: false},
methods: {
change() {
this.isactive = !this.isactive;
}
}
})
2、class的数组绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<style>
.active {
color: red;
}
</style>
<script src="./lib/vue.js"></script>
<script>
window.onload = function () {
let VM = new Vue({
el: '#mytest',
//对应:class里的值
data: {active: ''},
methods: {
change() {
this.active = this.active == '' ? 'active' : ''
}
}
})
}
</script>
</head>
<body>
<div class="container" id="mytest">
<div class="jumbotron">
<!--注意:如果需要添加其他静态的class,那么只要在名称上加上引号即可,否则视为变量处理如下面的类test-->
<div :class="[active,'test']" @click="change">are you ok???</div>
</div>
</div>
</body>
</html>
3、style的对象绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<style>
.active {
color: red;
}
</style>
<script src="./lib/vue.js"></script>
<script>
window.onload = function () {
let VM = new Vue({
el: '#mytest',
data: {
activeObj: {
color: 'black',
'font-size': '20px'
}
},
methods: {
change() {
this.activeObj.color = this.activeObj.color == 'black' ? 'red' : 'black';
}
}
})
}
</script>
</head>
<body>
<div class="container" id="mytest">
<div class="jumbotron">
<!--用style的对象来绑定样式-->
<div :style="activeObj" @click="change">are you ok???</div>
</div>
</div>
</body>
</html>
4、style的数组绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<style>
.active {
color: red;
}
</style>
<script src="./lib/vue.js"></script>
<script>
window.onload = function () {
let VM = new Vue({
el: '#mytest',
data: {
activeObj: {
color: 'black',
'font-size': '20px'
},
testObj:{
'text-decoration':'underline'
}
},
methods: {
change() {
this.activeObj.color = this.activeObj.color == 'black' ? 'red' : 'black';
}
}
})
}
</script>
</head>
<body>
<div class="container" id="mytest">
<div class="jumbotron">
<!--用style的数组可以容纳多个对象,可以是vue里data的数据,也可以是行内数据,注意引号-->
<div :style="[activeObj,testObj,{'font-weight':'bold'}]" @click="change">are you ok???</div>
</div>
</div>
</body>
</html>
5、通过委托事件绑定实现
通过methods里的方法,第一个传值是event,那么通过event.target 或者 event.currentTarget来操作DOM实现类的切换,可结合jquery
vue 中样式的绑定的更多相关文章
- 黑马vue---17、vue中通过属性绑定绑定style行内样式
黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...
- 黑马vue---16、vue中通过属性绑定为元素设置class类样式
黑马vue---16.vue中通过属性绑定为元素设置class类样式 一.总结 一句话总结: 这里就是为元素绑定class样式,和后面的style样式区别一下 vue中class样式绑定方式的相对于原 ...
- vue_music:排行榜rank中top-list.vue中样式的实现:class
排行榜的歌曲列表,根据排名渲染不同的样式,同时需要考虑分辨率的2x 3x图 不同的样式--:class 考虑分辨率的2x 3x图--需要在stylu中的mixin中bgImage根据屏幕分辨率选择图片 ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- vue中滚动事件绑定的函数无法调用问题
问题描述: 一个包含下拉加载的页面,刷新当前页然后滚动页面,能够正常触发滚动事件并调用回调函数,但是如果是进了某一个页面然后再进的该页面,滚动事件能够触发, 但是回调函数在滚动的时候只能被调用一次. ...
- Vue中this的绑定
之前写过一篇文章 ES6与React中this完全解惑 其实Vue也是相同的道理.在Vue的官方文档中提到: 不要在选项属性或回调上使用箭头函数,比如 created: () => consol ...
- Vue中v-for不绑定key会怎样
Vue的v-for不绑定key,默认行为和绑定key="index"是差不多的,官方没有默认这种行为的情况下,会导致所有列表DOM重新渲染.key="index" ...
- vue中的js绑定样式
添加class 对象形式添加 activated为true时p标签的class为activated false时为空 <div id="app"> <p :c ...
- 第二章 Vue快速入门-- 15 vue中通过属性绑定为元素设置class类样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
随机推荐
- Java的两大数据类型
Java的两大数据类型 基本数据类型 byte,short,int,long,float,double,boolean,char byte 类别 内容 类型 byte 简介 byte 数据类型是8位. ...
- vue 学习笔记—axios(替代vue-resource)
一.使用 1. 引入CDN的方式 https://unpkg.com/axios@0.16.2/dist/axios.min.js 或者 npm方式 npm install axios --sa ...
- 基于html2canvas实现网页保存为图片及图片清晰度优化
一.实现HTML页面保存为图片 1.1 已知可行方案 现有已知能够实现网页保存为图片的方案包括: 方案1:将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输出为包含 ...
- DataGrid 查不出数据 注意事项
总结以下几条:1.SQL文在数据控中查询成功在写入,表内字段名尽量复制,手打太容易错了.写SQL写错了,没有智能提示.2.DataGrid数据源先绑定.3.检查parameter顺序,条件的顺序也要考 ...
- [转] Torch中实现mini-batch RNN
工作中需要把一个SGD的LSTM改造成mini-batch的LSTM, 两篇比较有用的博文,转载mark https://zhuanlan.zhihu.com/p/34418001 http://ww ...
- 2018 Multi-University Training Contest 9 杭电多校第九场 （有坑待补）
咕咕咕了太久 多校博客直接从第三场跳到了第九场orz 见谅见谅(会补的!) 明明最后看下来是dp场 但是硬生生被我们做成了组合数专场…… 听说jls把我们用组合数做的题都用dp来了遍 这里只放了用组 ...
- Python3学习笔记05-数字
Python 数字数据类型用于存储数值 数字类型不能修改,如果改变数字数据类型的值,将重新分配内存空间 以下实例在变量赋值时 Number 对象将被创建: var1 = 10 var2 = 20 也可 ...
- 关于nginx服务器上传限制
nginx的上传参数问题,需要特别注意client_max_body_size这个参数,否则会中断在nginx的请求中,在php中无法log到访问的.修改了php.ini文件如下:参数 设置 说明fi ...
- Minidump文件分析
原文地址:blog.csdn.net/pkrobbie/article/details/6636310 简介 在过去几年里,崩溃转储(crash dump)成为了调试工作的一个重要部分.如果软件在客户 ...
- ionic配置
这个问题在升级ionic2的时候可能会遇到,不一定是windows,但是解决办法都是一样的,其实很简单,就是sass不支持当前的环境,那么在当前环境重新安装一下就好了 先卸载: npm uninsta ...