一驯嘱,vue基礎 數(shù)據(jù)綁定?列表循環(huán) 事件處理
在script標簽中
//實例化vue
var app=new Vue({
el:'#box',? /*vue實例關(guān)聯(lián)的視圖*/
data:{? /*業(yè)務邏輯里面的數(shù)據(jù)*/
msg:'這是一個vue的demo',
result:{
msg:'這是一個對象'
},
list:['111','222','3333'],
list3:[
{cate:'寶馬',list:[{title:'寶馬x1'},{title:'寶馬x1'},{title:'寶馬x1'}]},
{cate:'奔馳',list:[{title:'奔馳x1'},{title:'奔馳x1'},{title:'奔馳x1'}]}
]
}
})
在html中
<div id="box">
{{msg}}
{{result.msg}}
<ul>
<li v-for="(item,key) in list">
{{key}}----{{item}}
</li>
</ul>
<ul>
<li v-for="item in list3">
{{item.cate}}
<ol>
<li v-for="i in item.list">
{{i.title}}
</li>
</ol>
</li>
</ul>
</div>
事件:第一種執(zhí)行方法的方式v-on:click? ? v-on:click="getData()
? ? ? ? ? ?第二種執(zhí)行方法的方式@click? ? ? ? @click="getData()
v-model(雙向數(shù)據(jù)綁定)表示 初始化的時候把data上面的數(shù)據(jù)可以賦值給input , 當input改變的時候又會把值賦值給v-model的值