惊艳的vuejs

发表于 更新于
“大圣，此去欲何？” “踏南天，碎凌霄。” “若一去不回……” “便一去不回！”
### 双向数据绑定 
1
2
3
4
5
6
7
8
<body id="app">
	<h1>hello</h1>
	<input type="radio" id="one" value="face" v-model="className">
	<input type="radio" id="two" value="msg" v-model="className">
	<div class="{{ className}}">
	    <h1>{{ textValue }}</h1>
	</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
window.onload = function () {
	var dataList = {
		className : 'app',
		textValue : '你好'
		}

		new Vue({
		el:'#app',
		data: dataList
	});
}

计算属性

1
2
3
4
5
6
7
8
9
<body id="app">
	<h1>hello</h1>
	<div class="{{ className }}">
	    <h1>
	        a = {{a}}
	        b = {{b}}
	    </h1>
	</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload = function () {
	var dataList = {
		className : 'app',
		textValue : '<i>你好</i>',
		a: 1
	}
	var vm = new Vue({
		el:'#app',
		data: dataList,
		computed: { b: function () {
		return this.a + 1;
	    }}
	});

	setTimeout(function () {
	vm.a = 4;
	}, 5000);
}

绑定class

1
2
3
4
5
6
7
8
<body id="app">
	<h1>hello</h1>
	<div class="{{ className }}">
	    <h1 class="com" v-bind:class="{'app': a, 'msg':b}">
		{{ fullName }}
	</h1>
	</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.onload = function () {
	var dataList = {
		a : true,
		b : false,
		fullName: 'yangguoqi'
	}
	var vm = new Vue({
		el:'#app',
		data: dataList,
	});
	setTimeout(function () {
		vm.a = false;
		vm.b = true;
	},5000);
}