<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. Vim任意代码执行漏洞(CVE-2019-12735)

    Vim通过Modelines执行任意代码 漏洞概要: 在8.1.1365之前的Vim和在0.3.6之前的Neovim很容易通过打开特制的文本文件而通过模型执行任意代码. 复现条件: 确保未禁用mode ...

  2. 8.5 NOIP 模拟测试 13

    今天的考试说实话T1很简单没A,我是傻X.T2T3难得一批,但是暴力的分还是拿了! 总结一下就是:骗分过样例,暴力出奇迹!只要瞎搞就行了! 话说现在终于不像之前那么傻了,终于知道打暴力了,因为之前暴力 ...

  3. 『题解』洛谷P5436 【XR-2】缘分

    Problem Portal Portal1:Luogu Description 一禅希望知道他和师父之间的缘分大小.可是如何才能知道呢? 一禅想了个办法,他先和师父约定一个正整数\(n\),接着他们 ...

  4. 机器学习之Anaconda介绍

    Anaconda Distribution 最受欢迎的Python / R数据科学发行版 轻松安装1,400多个Python / R数据科学包并管理您的包,依赖项和 环境 - 只需单击一下按钮即可.免 ...

  5. linux shell中使用sed命令

    例1:批量的将变量的值代替指定文件中的指定内容. #!/bin/bash for i in {1..100} mgr_port=`expr $i + 5345` data_port=`expr $i ...

  6. python3学习,有c++的基础

    # 为注释一行 ''' ''' 和 """ """为注释多行 用缩进表示代码块,不用{},同一等级代码用的缩进数一致 一条语句写在多行:a= ...

  7. Weblogic 12c 的 Apache HTTP Server 整合插件(Plug-In)下载地址

    资料来源:到哪里下载Weblogic 12c 的Plug-In 为 Apache HTTP Server 摘录如下: 最新的Weblogic 12c不再为 Apache HTTP Server提供缺省 ...

  8. CMDB连接方式

    1.agent agent (放在每台客户端服务器上,定时任务) 脚本演示 # 采集本机的信息 执行命令 import subprocess v1 = subprocess.getoutput('ip ...

  9. nyoj 48-小明的调查作业(set)

    48-小明的调查作业 内存限制:64MB 时间限制:1000ms Special Judge: No accepted:15 submit:29 题目描述: 小明的老师布置了一份调查作业,小明想在学校 ...

  10. 【前端知识体系-JS相关】JS-Web-API总结

    2.1 DOM操作 2.1.1 DOM的本质是什么? <!-- DOM树:二叉树 --> /* <?xml version="1.0" encoding=&quo ...