<!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+element-ui实现表格内嵌套el-image自动绑定tableData中的图片url,并实现点击大图功能
- vue 项目 利用bus实现登录注册页面之间的切换
- Vue2.0+vuex+H5实现音乐播放及歌曲切换功能的方法及原理解释
- THREEJS(版本85)实现鼠标点击的高亮显示(如颜色变化)
- 如何在html页面中点击本地电脑中的exe文件/vue如何实现页面当中点击外部应用程序
- vue+ elelment-ui +tree树形组件背景颜色的修改,点击节点背景颜色修改设置为其他颜色,或是样式不生效的原因
- 在VUE里实现一个简单的中国地图
- vue.js实现点击后动态添加class及删除同级class - 我的益达
- vue 百度地图实现标记多个maker,并点击任意一个maker弹出对应的提示框信息, (附: 通过多个地址,标记多个marker 的 方法思路)