vue.js双向数据绑定
分类：实例代码
分享一段代码实例，它实现了vue.js双向数据绑定效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#app{text-align:center;}
.size{font-size:24px;}
.color{color:#F00;}
.background{background:#999;}
.border{border:3px solid #F00;}
</style>
</head>
<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>
vue.js双向数据绑定，这样的场景在实际项目中还是用的比较多的，关于vue.js双向数据绑定就介绍到这了。
vue.js双向数据绑定属于前端实例代码，有关更多实例代码大家可以查看。