Vue.js 控制css样式
<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样式的更多相关文章
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
- 用JS控制CSS基本样式
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp29 用JS控制CSS基本样式的方法 CSS code .class1 { ...
- jQuery控制CSS样式
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- js控制div样式显示与隐藏,JS通过点击超链接右边(指定位置)显示一个图标
原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...
- js设置css样式.
在js设置css样式做法 var obj = document.getElementById('div'); obj.style.width = '100px'; obj.style.height = ...
- php有效的过滤html标签,js代码,css样式标签
过滤html标签�php中太简单了,我们可以直接使用strip_tags函数来实现了,下面给各位整理了一些关于 strip_tags函数的例子. php过滤html的函数:strip_tags(str ...
- 原生js更改css样式的两种方式
下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1:css表达式2:css表达式3 &quo ...
- 用js控制css属性
在用js控制css属性时,行内css属性可以任意控制,但若是在<style></style>中写的css属性,均不能用alert读取,但是赋值却有几种现象, 第一种:无法读取, ...
- 11-13 js操作css样式
1.Js操作css样式 Div.style.width=”100px”.在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性,跟实际项目是不符. ...
随机推荐
- Vim任意代码执行漏洞(CVE-2019-12735)
Vim通过Modelines执行任意代码 漏洞概要: 在8.1.1365之前的Vim和在0.3.6之前的Neovim很容易通过打开特制的文本文件而通过模型执行任意代码. 复现条件: 确保未禁用mode ...
- 学习笔记51_MongoDB使用
MongoDB的包: 例如:设置Mongodb端口 在命令行: F:\MongoDB>mongod.exe --port:3306 做集群: 安装和使用: 1.在服务中添加MongoDB ( 指 ...
- Appium的加载过程
appium运行流程 Appium的加载过程如上图. 1)调用Android adb完成基本的系统操作: 2)向Android上部署bootstrap.jar: 3)Bootstrap.jar For ...
- vue , debounce 使用
有时候不想直接在methods中的方法前面加debounce, getFullName: debounce(function() { console.log('my fullname is chent ...
- 底半部之工作队列和tasklet,内核定时器。
1.软中断机制 不能以模块形式出现 使用起来不够灵活2.tasklet 核心数据结构 struct tasklet_struct { function ...
- Java描述设计模式(19):模板方法模式
本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景 通常一款互联网应用的开发流程如下:业务需求,规划产品,程序开发,测试交付.现在基于模板方法模式进行该过程描述. public c ...
- PHP对象继承
PHP对象继承<?php class foo{ public function printItem($string) { echo 'Foo: ' . $string . PHP_EOL; } ...
- Prometheus客户端开发:腾讯云CLB
一:简介 随着prometheus的使用人群逐渐扩大,官方定义的client exporter虽然能满足我们的大部分需求,但是很多监控还是需要我们自定义开发,以下内容就是基于腾讯云SDK,对腾讯云CL ...
- java笔试面试第一天
好久未曾启用我的博客,最近来上海找工作,想将笔试面试的过程做个记录,毕竟有总结才有提高嘛.今天算是笔试面试正式开始第一天吧,以下就是我的笔试总结(没有原题了,只有知识点): 笔试题1:java sta ...
- idea2017建立jsp工程及tomcat等配置
1:建立工程,选择Java Enterprise,可能需要选择tomcat路径和jdk路径: =============================== 以下作为第二种方式参考: 1:创建新工程 ...