<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定class属性</title>
<style type="text/css">
.se_qukuai{
width: 400px;
height: 400px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="isActive = !isActive">激活与静默</button>
<div v-bind:class="{'se_qukuai':isActive}"></div>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
isActive:true,
}
});
</script>
</body>
</html>
vue-入门实例5-1.html
最新推荐文章于 2024-09-12 16:25:48 发布
该文章演示了一个使用Vue.js实现的功能,通过点击按钮动态地切换div元素的class,从而改变其样式。当isActive数据属性为true时,div应用se_qukuai类,显示浅蓝色背景;反之,背景色消失。
摘要由CSDN通过智能技术生成