Fork me on GitHub

惊艳的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);
}
请我喝一个苹果味的美年达吧,谢谢!