vue.js雙向資料繫結

螞蟻小編發表於2017-05-10
Vue.js

分享一段程式碼例項，它實現了vue.js雙向資料繫結效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章