<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style type="text/css">
.blue{ background-color: blue;
}
.green{ background-color: green;
}
div{
width: 400px;
height: 200px;
border-bottom-width: 2px;
}
</style> <div id="container"> <div v-for="item in someData" class="blue" v-bind:class="{'green': item.selected }" @click="green(item)">
点我
</div>
</div> <script> var vm = new Vue({
el: '#container',
data: {
someData: [{"id":1,selected:true},{"id":2,selected:false},{"id":3,selected:true}] },
methods:{
green:function(item){
item.selected=!item.selected;
}
} }) </script>

Vue.js 控制css样式的更多相关文章

  1. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  2. 用JS控制CSS基本样式

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...

  3. jQuery控制CSS样式

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  5. js设置css样式.

    在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...

  6. php有效的过滤html标签,js代码,css样式标签

    过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...

  7. 原生js更改css样式的两种方式

    下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3  &quo ...

  8. 用js控制css属性

    在用js控制css属性时,行内css属性可以任意控制,但若是在<style></style>中写的css属性,均不能用alert读取,但是赋值却有几种现象, 第一种:无法读取, ...

  9. 11-13 js操作css样式

    1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...

随机推荐

  1. QHDYZ模拟赛20191012

    今天信息处老师(并不是教练,基本等于机房看门大爷) (好吧老师其实很犇,软件什么的厉害的一批,只是不能带oi--) 跟我说:"xxj,过两天月考完了,可以在初赛前再整一次模拟赛,一天,三道题 ...

  2. 【POJ3208】Apocalypse Someday

    Description 666号被认为是神秘的"野兽之数",在所有以启示录为主题的大片中都是一个被广泛使用的数字.但是,这个数字666不能总是在脚本中使用,所以应该使用1666这样 ...

  3. Java中打印日志,这4点很重要!

    目录 一.预先判断日志级别 二.避免无效日志打印 三.区别对待错误日志 四.保证记录完整内容 打印日志,要注意下面4点. 一.预先判断日志级别 对DEBUG.INFO级别的日志,必须使用条件输出或者使 ...

  4. 原生JS实现双向链表

    1.前言 双向链表和单向链表的区别在于,在链表中,一个节点只有链向下一个节点的链接,而在双向链表中,链接是双向的:一个链向下一个元素,另一个链向前一个元素,如下图所示: 从图中可以看到,双向链表中,在 ...

  5. Python——标识符的命名规则

    01 Python语言的特点 python的语言特点有很多,我们这里只讲一点,python是一门面向对象的语言,即一切皆对象(Linux中有一句是:一切皆文件),括号内的只是打个比方,不懂也没事,就是 ...

  6. jquery jssdk分享报错解决方法

    jssdk分享报错解决方法 一般都是参数传错了

  7. SSM整合案例--用户登录

    实现用户登录案例,并进行非法拦截 实现当用户未登录时,无法跳转到出登录页面以外的任何页面,拦截用户仍在登陆页面:当用户登录成功即可跳转到其他页面 (1)导入依赖 <!-- https://mvn ...

  8. 数据分析之路 第一篇 numpy

    第一篇 numpy 1.N维数组对象 :ndarray在Python中既然有了列表类型,为啥还要整个数组对象(类型)?那是因为:1.数组对象可以除去元素间运算所需要的循环,使得一维向量更像单个数据2. ...

  9. Android Debug 之 Log 最佳实践

    本文微信公众号「AndroidTraveler」首发. 背景 在开发过程中,调试是必不可少的一项工作. 当我们要确定项目的逻辑时,当我们要了解界面的生命周期时,当我们发现新写的逻辑与期望效果不一致时, ...

  10. 小白学 Python(23):Excel 基础操作(上)

    人生苦短,我选Python 前文传送门 小白学 Python(1):开篇 小白学 Python(2):基础数据类型(上) 小白学 Python(3):基础数据类型(下) 小白学 Python(4):变 ...