<!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. 笔记 - DBSherlock: A Performance Diagnostic Tool for Transactional Databases

    OLTP系统的问题很难排查和定位,这就是为什么要花那么多钱去请DBA 因为TP系统的请求很多都是毫秒级别,而且同时有大量的并发,所以由于资源,或随机的原因导致的问题,很难去定位根因 哪怕数据库系统尤其 ...

  2. nginx listen 端口 443 80 https 和 wss

    端口号 443 和 80 端口的区别 一般指定 443 和 80 端口都是使用域名时所需要的 当我们使用域名请求时,一般是不添加端口号的 例如:http://www.baidu.com 在不添加端口号 ...

  3. Git: git tag 使用小结(给发布版本打标记，切换并修改某个历史版本)

    通常在软件发布的时候会打一个tag,用于标注这次发布的相关信息, 这样做的好处是,将来如果这个版本出现了问题,可以通过tag迅速定位到当前版本,进行错误修复. 1. 新建tag $ git tag v ...

  4. IOS CocoaPods基本使用技巧

    目录: 什么是CocoaPods 如何下载并安装CocoaPods 如何使用CocoaPods 什么是CocoaPods 当开发iOS应用时,或多或少的都会引用第三方类库,例如AFNetworking ...

  5. 字典树(查找树) leetcode 208. Implement Trie (Prefix Tree) 、211. Add and Search Word - Data structure design

    字典树(查找树) 26个分支作用:检测字符串是否在这个字典里面插入.查找 字典树与哈希表的对比:时间复杂度:以字符来看:O(N).O(N) 以字符串来看:O(1).O(1)空间复杂度:字典树远远小于哈 ...

  6. leetcode 374. Guess Number Higher or Lower 、375. Guess Number Higher or Lower II

    374. Guess Number Higher or Lower 二分查找就好 // Forward declaration of guess API. // @param num, your gu ...

  7. Flutter和原生交互学习

    PlatformChannel功能简介 PlatformChannel分为BasicMessageChannel.MethodChannel以及EventChannel三种.其各自的主要用途如下: B ...

  8. PAT 甲级 1068 Find More Coins (30 分) (dp，01背包问题记录最佳选择方案)***

    1068 Find More Coins (30 分)   Eva loves to collect coins from all over the universe, including some ...

  9. java使用Sonic 算法对音频变速不变声、变调、调整音量

    依赖库:https://github.com/waywardgeek/sonic 基础库:Sonic.java /* Sonic library Copyright 2010, 2011 Bill C ...

  10. Redis应用场景梳理

    缓存 作为Key-Value形态的内存数据库,Redis 最先会被想到的应用场景便是作为数据缓存.而使用 Redis 缓存数据非常简单,只需要通过string类型将序列化后的对象存起来即可,不过也有一 ...