标签：表单元素 ansi parent hose margin ant eth ems imp
数据绑定是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; } } });
你们快试试吧!
标签：表单元素 ansi parent hose margin ant eth ems imp
原文地址：http://www.cnblogs.com/yang-ting/p/7152590.html
