<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. MFC部分通用控件

    1.StaticText鼠标单击事件 设置Notify属性,添加单击事件处理函数即可 2.Button 设置图标按钮   m_btn.SetIcon(LoadIcon(AfxGetResourceHa ...

  2. [考试反思]1024csp-s模拟测试86:消耗

    %%%两个没素质的和一个萌两小时AK 最近貌似总是可以比较快速的拿下T1,然后T2打到考试结束... T1是套路题没什么好说的. T2是一个比较蠢的博弈题,我花了很长时间干各种乱七八糟的事 什么打表啊 ...

  3. NOIP模拟测试25

    这次考试后面心态爆炸了...发现刚了2h的T2是假的之后就扔掉了,草率地打了个骗分 T1只会搜索和m=0 最先做的T3,主要是发现部分分很多,当时第一眼看上去有87分(眼瞎了). 后来想了想,感觉一条 ...

  4. 爬虫学习--Day4(小猿圈爬虫开发_2)

    requests模块 - urllib模块 - requests模块 requests模块:python中原生的一款基于网络请求的模块,功能非常强大,简单便捷,效率极高.作用:模拟浏览器发送请求. 如 ...

  5. Redis实战--Jedis实现分布式锁

    echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 分布式 ...

  6. Ubuntu 16.04安装JDK并配置环境变量

    系统版本:Ubuntu 16.04 JDK版本:jdk1.8.0_121 1.官网下载JDK文件jdk-8u121-linux-x64.tar.gz 我这里下的是最新版,其他版本也可以 2.创建一个目 ...

  7. Java 读取Word批注中的文本和图片

    本文将介绍读取Word批注的方法,包括读取Word批注中的文本及图片.关于操作Word批注的方法还可以参考这两篇文章:Java 添加.回复.修改.删除Word批注:Java 给Word指定字符串添加批 ...

  8. 关于laravel框架Model返回的值为stdClass对象转换两种方法

    一般情况下laravel模型层查询出来的数据是stdClass对象,无法直接当做数组进行视图展示,所以需要转换为数组格式. Model中查到的数据为  $data  ,对它进行转化,转化为数组. 第一 ...

  9. Nginx Linux和Windows安装教程

    前言 本篇文章主要介绍的是Nginx Linux环境和Windows的安装教程. Nginx 介绍 Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Syso ...

  10. [第二章]了解storm

    1.什么是storm Apache Storm is a free and open source distributed realtime computation system. 免费.开源.分布式 ...