<!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
原创
©著作权归作者所有:来自51CTO博客作者虾米大王的原创作品,请联系作者获取转载授权,否则将追究法律责任
上一篇:vue-入门实例5-4.html
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
5-Docker实例-安装httpd
5-Docker实例-安装httpd
centos apache docker -
5-Docker实例-安装redis
5-Docker实例-安装redis
redis docker Redis -
vue-入门实例7-1-5.html
【代码】vue-入门实例7-1-5.html。
html servlet dreamweaver vue.js Vue -
vue-入门实例1-4-5.html
【代码】vue-入门实例1-4-5.html。
vue.js javascript 前端 html Vue -
vue-入门实例3-1-5.html
【代码】vue-入门实例3-1-5.html。
javascript vue.js 前端 html Vue -
vue-入门实例1-1.html
【代码】vue-入门实例1-1.html。
vue.js javascript 前端 html Vue -
vue-入门实例5-5.html
【代码】vue-入门实例5-5.html。
css javascript html 背景色 -
vue-入门实例7-1-1.html
【代码】vue-入门实例7-1-1.html。
javascript vue.js 前端 html i++ -
vue-入门实例1-4.html
【代码】vue-入门实例1-4.html。
javascript vue.js 前端 html Vue -
vue-入门实例6-1.html
【代码】vue-入门实例6-1.html。
javascript vue.js 前端 html Vue -
vue-入门实例4-1.html
【代码】vue-入门实例4-1.html。
javascript vue.js 前端 html ide -
vue-入门实例3-1-1.html
【代码】vue-入门实例3-1-1.html。
vue.js javascript 前端 html Vue -
vue-入门实例8-1.html
【代码】vue-入门实例8-1.html。
javascript vue.js 前端 Vue html -
vue-入门实例9-1.html
【代码】vue-入门实例9-1.html。
vue.js javascript 前端 html Vue -
vue-入门实例12-1.html
【代码】vue-入门实例12-1.html。
html servlet javascript ide List -
vue-入门实例3-1.html
【代码】vue-入门实例3-1.html。
javascript vue.js 前端 html Vue -
vue-入门实例7-1.html
【代码】vue-入门实例7-1.html。
javascript vue.js 前端 html Vue -
vue-入门实例2-5.html
【代码】vue-入门实例2-5.html。
javascript 前端 vue.js html css -
vue-入门实例5-6.html
【代码】vue-入门实例5-6.html。
css javascript html 背景色