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双向数据绑定属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容