<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. c# 保留两位小数点

    保留两位小数点 由于简单的原因大家直接看代码块. using System; namespace HelloWorld { class Program { static void Main(strin ...

  2. Wycieczki 线性代数

    B. Wycieczki 题目描述 给定一张n个点m条边的带权有向图,每条边的边权只可能是1,2,3中的一种.将所有可能的路径按路径长度排序,请输出第k小的路径的长度,注意路径不一定是简单路径,即可以 ...

  3. JavaScript BOM学习

    Mirror王宇阳 2019年11月13日 [首发] 数日没有更新博文了,觉得不好意思了!这不是,整理了一下JavaScript的一下BOM笔记资料,今天贡献出来!(HTML DOM也会随后整理发表) ...

  4. Linux基础指令--韩顺平老师课程笔记

    一.vi和vim编辑器 ①.三种模式 所有的 Linux 系统都会内建 vi 文本编辑器.vim 具有程序编辑的能力,可以看做是 vi 的增强版本,可以主动的以字体颜色辨别语法的正确性,方便程序设计. ...

  5. 开源跳板机(堡垒机)系统 Jumpserver安装教程(带图文)

    环境 系统: CentOS 7 IP: 192.168.244.144 关闭 selinux 和防火墙 # CentOS 7 $ setenforce 0 # 可以设置配置文件永久关闭 $ syste ...

  6. 最新JetBrains PyCharm 使用教程--常用快捷键和设置PyCharm为Eclipse快捷键(四)

    PyCharm常用快捷键使用 Ctrl + D:复制当前行 Ctrl + Y:删除当前行 Ctrl + Z 撤销 Shift + Enter:快速换行 Ctrl + /:快速注释 Ctrl + F: ...

  7. ActiveMQ消息队列从入门到实践(1)—JMS的概念和JMS消息模型

    1. 面向消息的中间件 1.1 什么是MOM 面向消息的中间件,Message Oriented Middleware,简称MOM,中文简称消息中间件,利用高效可靠的消息传递机制进行平台无关的数据交流 ...

  8. try-with-resources优先于try-finally

    参考资料:<Effective Java>.<Java核心技术 卷1>.https://www.cnblogs.com/flyingeagle/articles/1015292 ...

  9. C# 彻底搞懂async/await

    前言 Talk is cheap, Show you the code first! private void button1_Click(object sender, EventArgs e) { ...

  10. Linux下安装和使用WPS,体验良好

    最近,我在ubuntu18.04.3下面使用LibreOffice,感觉良好. 正值政府机关在进行2019年度正版软件使用情况整改,保护知识产权,我表示热烈欢迎并强烈支持. 通过摸底,因为以前采购的w ...