html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>vue 双向数据绑定 </title>
- </head>
- <style>
- #app{text-align:center;}
- .size{font-size:24px;}
- .color{color:#F00;}
- .background{background:#999;}
- .border{border:3px solid #F00;}
- </style>
- <body>
- <div id="app" v-bind:class="{ size : size , border : border , color : color , background : background }">
- vue.js 双向绑定
- <input type="checkbox" v-model="size" id="size">
- <label for="size"> 文字大小 </label>
- <input type="checkbox" v-model="border" id="border">
- <label for="border"> 边框 </label>
- <input type="checkbox" v-model="color" id="color">
- <label for="color"> 文字颜色 </label>
- <input type="checkbox" v-model="background" id="background">
- <label for="background"> 背景颜色 </label>
- </div>
- <script src="https://unpkg.com/vue/dist/vue.js"></script>
- <script>
- new Vue({
- el : "#app",
- data : {
- size : false,
- border : false,
- color : false,
- background : false
- }
- });
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/43957/c3a6d52e53a958284f55b2f7fef7d4ed.html