1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>changeColor</title>
  7.     <script src="https://unpkg.com/vue/dist/vue.js"></script>
  8. </head>
  9. <style>
  10.     div {width: 100px;height: 100px;background: lightcoral;}
  11.     .changeColor {background: lightgreen;}
  12. </style>
  14. <body>
  16.     <section id="app">
  17.         <div :class="{changeColor}" @click="changeColor =! changeColor">
  18.         </div>
  19.     </section>
  21.     <script>
  22.         new Vue({
  23.             el: '#app',
  24.             data: {
  25.                 changeColor: false
  26.             }
  27.         })
  28.     </script>
  29. </body>
  31. </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. R获取指定GO term和KEGG pathway的gene list基因集

    clusterProfiler没有显性的接口,但是可以直接扣取clusterProfiler里的函数. 核心函数就是get_GO_data GO_DATA <- get_GO_data(&quo ...

  2. Maven Multi-Module Example

    Maven Multi-Module - 国内版 Binghttps://cn.bing.com/search?q=Maven+Multi-Module&qs=n&form=QBRE& ...

  3. Windows下通过命令行 获取文件详细信息

    @echo off echo version: wmic datafile where Name="C:\\Product\\File\\Release\\1.1.1\\File.exe&q ...

  4. Android开发--IntentService的用法，你错过了什么

    Android开发--IntentService的用法,你错过了什么 . 本文链接:https://blog.csdn.net/smbroe/article/details/45009721 Inte ...

  5. shell编程系列2--字符串的处理

    shell编程系列2--字符串的处理 字符串的处理 .计算字符串的长度 方法1 ${#string} 方法2 expr length "$string" (如果string中间有空 ...

  6. python-learning-第二季-画图matplotlib

    https://www.bjsxt.com/down/8468.html 绘制方法: 绘制直线: #coding:utf- import matplotlib.pyplot as plt #准备绘制的 ...

  7. WPF ContextMenu DataTemplate MenuItem Visibility 问题

    问题: ContextMenu 的 DataTemplate 中 MenuItem 设置 Visibility 不起作用 需要添加一下样式才可以: <ContextMenu.ItemContai ...

  8. pandas绘制矩阵散点图（scatter_matrix）的方法

    以 sklearn的iris样本为数据集 import matplotlib.pyplot as plt from scipy import sparse import numpy as np imp ...

  9. LintCode: coins in a line I

    有 n 个硬币排成一条线.两个参赛者轮流从右边依次拿走 1 或 2 个硬币,直到没有硬币为止.拿到最后一枚硬币的人获胜. 请判定 第一个玩家 是输还是赢? n = 1, 返回 true.n = 2, ...

  10. shell脚本通过子网掩码计算出掩码位数

    子网掩码格式为255.255.255.0可以通过以下脚本计算掩码位数 #!/bin/sh #maskdigits.sh mask maskdigits () { a=$(echo "$1&q ...