Vue
<div class="me">{{you}}</div>
new Vue({ //element 元素 选择器
el:'.me',
data:{ //data 数据
you:'hellow'
}
})
v-model
<div class="me">
<input type="text" v-model="msg">
<p>{{msg}}</p>
</div>
new Vue({
el:'.me',
data:{
msg:''
}
})
v-on
<div id="itany">
<button v-on:click="alt">按钮</button>
</div>
var vm=new Vue({
el:'#itany',
data:{
msg:'hello vue'
},
methods:{
alt:function(){
alert(vm.msg)
alert(this.msg)
}
}
})
vue-for
<div class="me">
<ul>
<li v-for="v in arr">{{v}}</li>
</ul>
</div>
new Vue({
el:'.me',
data:{
arr:[123,456,789],
obj:{name:'fuck',age:8}
}
})
<div class="me">
<ul>
<li v-for="(name,age) in obj">{{age}}__{{name}}</li>
</ul>
</div>
new Vue({
el:'.me',
data:{
obj:{name:'fuck',age:8}
}
})
<div class="me">
<ul>
<li v-for="vel in arrs">{{vel.num}},{{vel.name}},{{vel.price}}</li>
</ul>
</div>
new Vue({
el:'.me',
data:{
arrs:[
{num:1,name:'苹果',price:3},
{num:2,name:'香蕉',price:2},
{num:3,name:'梨',price:1}
]
}
})
vue-for表格
<div class="me">
<table border="1" width="300px" height="300px" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
</tr>
</thead>
<tbody>
<tr v-for="vel in arrs">
<td>{{vel.num}}</td>
<td>{{vel.name}}</td>
<td>{{vel.price}}</td>
</tr>
</tbody>
</table>
</div>
new Vue({
el:'.me',
data:{
arrs:[
{num:1,name:'苹果',price:3},
{num:2,name:'香蕉',price:4},
{num:3,name:'梨',price:5},
{num:4,name:'橘子',price:6}
]
}
})
