<!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. QQ 有很多关于会员的标记，腾讯舍不得为每一个标记用 1 个字节 Byte，而用的是 1 比特 Bit。

    17年的实践:腾讯海量产品的技术方法论-其它分享/专项技术区 - 即时通讯开发者社区! http://www.52im.net/thread-159-1-1.html 腾讯QQ1.4亿在线用户的技术挑 ...

  2. Manning Java Persistence with Hibernate & hibernate_in_action

    Manning | Java Persistence with Hibernatehttps://www.manning.com/books/java-persistence-with-hiberna ...

  3. sqllite connectionstring setting

    https://www.connectionstrings.com/sqlite/ SQLite.NET Basic Data Source=c:\mydb.db;Version=3; Version ...

  4. Python3入门（十三）——连接数据库

    以Mysql为例: 要操作关系数据库,首先需要连接到数据库,一个数据库连接称为Connection: 连接到数据库后,需要打开游标,称之为Cursor,通过Cursor执行SQL语句,然后,获得执行结 ...

  5. VMWare-Linux NAT模式联网配置

    VMWare-Linux NAT模式联网配置   摘自:https://blog.csdn.net/a56112777/article/details/83053566 (注意使用root用户) 1. ...

  6. 虚拟机的Vmtools

    安装了虚拟机之后,文件共享不方便,安装VMTools可以在windows上直接拖文件到linux上. 安装方法: 1.进入linux把CD弹出 2.打开虚拟机之后 3.下载完成可以在linux的CD设 ...

  7. Qt编写自定义控件63-水波效果

    一.前言 几年前就一直考虑过写这个控件了,在9年前用C#的时候,就看到过别人用C#写了个水波效果的控件,挺好玩的,当时看了下代码用的二维数组来存储变换的图像像素数据,自从学了Qt以后,有过几次想要用Q ...

  8. k8s记录-etcd集群部署（三）

    https://blog.csdn.net/fy_long/article/details/86542872 1)程序准备tar xvf etcd-v3.3.11-linux-amd64.tar.gz ...

  9. Delphi XE6 使用定时器或者线程解决程序界面无响应问题

    ---恢复内容开始--- 介绍 在手机应用上,我们不应该使用速度慢的代码,当然我们在桌面程序上也应该避免这个,当手机应用长时间没有相应的时候,程序会提示“程序没响应,是否关闭”的提示,这个非常不好,所 ...

  10. Linux虚拟机的命令分发工具。

    deploy.sh工具的目的是,将一个文件,发送到其他服务器上面去. runRemoteCmd.sh工具的目的是,将一个命令,在多台服务器上执行. depoly.conf是上面两个工具的配置文件. d ...