<!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实现点击编辑按钮将li变为可以输入文本的input
- 使用 vue 实现拖拽的简单案例,不会超出可视区域
- 简单的三种实现鼠标经过切换图片的方法
- Vue中如何实现点击按钮显示内容,点击内容或内容之外的区域隐藏内容
- Vue 如何快速实现头像裁剪?方法比你想象的简单
- SpringBoot + RabbitMQ + WebSocket + STOMP 协议 + Vue 实现简单的实时在线聊天案例
- 怎么把element的tootip设置为点击后出现提示框,且在提示框里面放其他元素,vue2动态给对象添加属性并实现响应式应答,样式穿透,获取年月日
- vue2.0 实现click点击当前li,动态切换class
- 自定义菜单栏实现点击添加按钮打开渲染进程的Dialog.vue模态框
- vue3项目中最简单的拖拽实现节点位置变化