数据绑定
数据绑定是vue.js的基础。本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定。
<!--这是我们的View-->
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
<script>
// 这是我们的Model
new Vue({
el: '#app',
data: {
message:'Hello World!'
}
})
</script>
将message绑定到文本框,当更改文本框的值时,
<p>{{ message }}</p>
中的内容也会被更新。
导航切换
这里主要应用了vue.js的v-for指令来渲染一个列表、v-bind指令来绑定class以及v-on指令来处理事件
1这是HTML代码
<div id="main">
2 <nav @click.prevent>
3 <a v-for="item in items" :class="{'show': item.active}" @click="makeActive(item, $index)">{{item.name}}</a>
4 </nav>
5 <p>You chose <b>{{active}}</b></p>
6 </div>
css代码:
1 *{
2 margin:0;
3 padding:0;
4 }
5 #main{
6 width:432px;
7 margin:0 auto;
8 text-align:center;
9 }
10 nav{
11 display:inline-block;
12 margin:60px auto 45px;
13 background-color:#5597b4;
14 box-shadow:0 1px 1px #ccc;
15 border-radius:2px;
16 }
17 nav a{
18 display:inline-block;
19 padding: 18px 30px;
20 color:#fff !important;
21 font-weight:bold;
22 font-size:16px;
23 text-decoration:none !important;
24 line-height:1;
25 background-color:transparent;
26 -webkit-transition:background-color 0.25s;
27 -moz-transition:background-color 0.25s;
28 transition:background-color 0.25s;
29 cursor:pointer;
30 }
31 b{
32 display:inline-block;
33 padding:5px 10px;
34 background-color:#c4d7e0;
35 border-radius:2px;
36 font-size:18px;
37 }
38 .show{
39 background-color:#e35885;
40 }
JS代码:
var vm = new Vue({
el:'#main',
data:{
active:'HTML',
items:[
{name:'HTML', active:true},
{name:'CSS', active:false},
{name:'JavaScript', active:false},
{name:'Vue.js', active:false}
]
},
methods: {
makeActive: function(item, index){
this.active = item.name;
for(var i=0; i<this.items.length;i++){
this.items[i].active = false;
}
this.items[index].active = true;
}
}
});
你们快试试吧!