vue实现简单的点击切换颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>changeColor</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<style>
div {width: 100px;height: 100px;background: lightcoral;}
.changeColor {background: lightgreen;}
</style>
<body>
<section id="app">
<div :class="{changeColor}" @click="changeColor =! changeColor">
</div>
</section>
<script>
new Vue({
el: '#app',
data: {
changeColor: false
}
})
</script>
</body>
</html>
vue实现简单的点击切换颜色的更多相关文章
- vue点击切换颜色限制个数（用了mui框架）
vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...
- 55.UIbutton点击切换颜色
#import "ViewController.h" #define width_w [UIScreen mainScreen].bounds.size.width #de ...
- 简单的JS控制button颜色随点击更改
先上效果图: 默认“今日”是选中状态,是行内样式: <button type="button" id="today" class="btn-li ...
- Vue实现active点击切换
Vue实现active点击切换 循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click=“active(index)” 2.将索引值传入class(索引等于几就第几个添加ac ...
- vue点击切换样式，点击切换地址栏，点击显示或者隐藏
1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...
- 编写最简单的 iPhone 界面切换应用
编写最简单的 iPhone 界面切换应用 以下是在iOS中最简单的界面切换示例.使用了多个Controller,并演示Controller之间在切换界面时的代码处理. 实现的应用界面: 首先,创建 ...
- 基于Django rest framework 和Vue实现简单的在线教育平台
一.基于api前端显示课程详细信息 1.调整Course.vue模块 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2 ...
- Vue的简单入门
Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
- 纯css就能实现可点击切换的轮播图，feel起来很丝滑
前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...
随机推荐
- 判断一个数组的长度用 Length 还是 SizeOf ?
最近发现一些代码, 甚至有一些专家代码, 在遍历数组时所用的数组长度竟然是 SizeOf(arr); 这不合适! 如果是一维数组.且元素大小是一个字节, 这样用看不出错误, 譬如: var arr ...
- 通过遍历而非排序求最值 python list in 时间复杂度 列表元素存在性
Write a function: def solution(A) that, given an array A of N integers, returns the smallest positiv ...
- 1.0 Android基础入门教程
1.0 Android基础入门教程 分类 Android 基础入门教程 本教程于2015年7月开始撰写,耗时半年,总共148节,涵盖了Android基础入门的大部分知识,由于当时能力局限,虽已竭尽全力 ...
- Sword cjson库函数使用
/* cjson库的使用 */ #include <stdio.h> #include <stdlib.h> #include <string.h> #includ ...
- 005-guava 集合-集合工具类-java.util.Collections中未包含的集合工具[Maps,Lists,Sets]，Iterables、Multisets、Multimaps、Tables
一.概述 工具类与特定集合接口的对应关系归纳如下: 集合接口 属于JDK还是Guava 对应的Guava工具类 Collection JDK Collections2:不要和java.util.Col ...
- 0.9.0.RELEASE版本的spring cloud alibaba sentinel+gateway网关实例
sentinel除了让服务提供方.消费方用之外,网关也能用它来限流.我们基于上次整的网关(参见0.9.0.RELEASE版本的spring cloud alibaba nacos+gateway网关实 ...
- ES6深入浅出-4 迭代器与生成器-4.总结
yield的值就是外面调用next得到的值 ES6给的新的语法,如果你给任何一个对象添加一个Symbol.interator的key,同时它的值是一个生成器. 下面选中的就是生成器.生成返回的东西是迭 ...
- snmp oid 和厂商对应关系
<node oid="default" name="Unknown" type="workstation"/><node ...
- pipline中使用ansible
实验架构: 192.168.0.96 gitlab 192.168.0.97 jenkins.ansible 192.168.0.98 harbor.docker集群 说明:下面代码编译镜像那一步的代 ...
- Java以UTF-8格式读写及追加写文件示例
package test; import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; im ...