<!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实现简单的点击切换颜色的更多相关文章

  1. vue点击切换颜色限制个数（用了mui框架）

    vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...

  2. 55.UIbutton点击切换颜色

    #import "ViewController.h" #define width_w     [UIScreen mainScreen].bounds.size.width #de ...

  3. 简单的JS控制button颜色随点击更改

    先上效果图: 默认“今日”是选中状态,是行内样式: <button type="button" id="today" class="btn-li ...

  4. Vue实现active点击切换

    Vue实现active点击切换 循环的情况: 1.点击时传入index索引(获取当前点击的是哪个) @click=“active(index)” 2.将索引值传入class(索引等于几就第几个添加ac ...

  5. vue点击切换样式，点击切换地址栏，点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

  6. 编写最简单的 iPhone 界面切换应用

    编写最简单的 iPhone 界面切换应用   以下是在iOS中最简单的界面切换示例.使用了多个Controller,并演示Controller之间在切换界面时的代码处理. 实现的应用界面: 首先,创建 ...

  7. 基于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 ...

  8. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  9. 纯css就能实现可点击切换的轮播图，feel起来很丝滑

    前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...

随机推荐

  1. 常用的web api总结

    1.querySelector 获取指定元素中匹配css选择器的元素. // 作用在document document.querySelector("#nav"); // 获取文档 ...

  2. JVM 数组创建的本质

    1.创建数组 创建一个MyParent4[] 数组 public class MyTest4 { public static void main(String[] args) { MyParent4[ ...

  3. locust性能测试脚本模板

    locust性能测试脚本模板 #!/usr/bin/env python # -*- coding: utf-8 -*- import time from locust import HttpLocu ...

  4. IM 简介

    LayIM - 打造属于你自己的网页聊天系统http://layim.layui.com/ 瓜子IM智能客服系统的数据架构设计(整理自现场演讲) - 知乎https://zhuanlan.zhihu. ...

  5. docker 打印带时间的日志

    1, 根据容器日志查看连接情况  docker logs 684  (因为从6.30日开是打印,太慢了.) 2,docker带参数的打印出日志 docker logs 684 --since=&quo ...

  6. 查看Oracle中是否有锁表

    转: 查看Oracle中是否有锁表 2018-04-23 17:59 alapha 阅读(19450) 评论(0) 编辑 收藏 一.用dba用户登录,或者将用户赋权为DBA用户 命令: su - or ...

  7. Tomcat 目录结构以及相关规范的介绍

    目录 安装tomcat tomcat目录结构 tomcat/bin目录 tomcat/conf目录 tomcat/logs目录 JavaEE对项目结构的规范 war包 安装Tomcat 参考:安装Ja ...

  8. Qt编写气体安全管理系统3-用户模块

    一.前言 从这篇开始逐个写具体的功能模块,用户模块主要有四个方面,用户登录.用户退出.用户管理.权限控制.这里都按照简单的常规做法来做,比如用户登录界面,就将用户名提供下拉框选择,然后输入密码,密码框 ...

  9. word xml 各个标签含义

    @参考文章 <w:p> <!--表示一个段落--> <w:val > <!--表示一个值--> <w:r> <!--表示一个样式串,指 ...

  10. Spring Boot 使用YAML配置

    YAML是JSON的一个超集,可以非常方便地将外部配置以层次结构形式存储起来.当项目的类路径中有SnakeYAML库(spring-boot-starter中已经被包含)时,SpringApplica ...