直接用app.vue來(lái)練手
修改<script>
<script>
export default {
name: 'app',
data: function () {
return {
list: [
{
label: '第一個(gè)',
state: true
},
{
label: '第二個(gè)',
state: false
}
]
}
}
}
</script>
在script里，export default相當(dāng)于是寫(xiě)了一個(gè) new vue()，在里面的data雏掠，則是對(duì)應(yīng)的數(shù)據(jù)，官方是es6的語(yǔ)法劣像，所以寫(xiě)的是data () {}乡话，轉(zhuǎn)成之前的js語(yǔ)法就是 data: function () {}。
這個(gè)data方法耳奕，return一個(gè)對(duì)象绑青，這個(gè)對(duì)象里放的就是所用的數(shù)據(jù)內(nèi)容诬像，這里我們只用到一個(gè)list對(duì)象數(shù)組，所以就只放了一個(gè)list闸婴。
修改html部分
<template>
<div id="app">
<ul>
<li v-for="item in list">
{{ item.label }}
</li>
</ul>
</div>
</template>
在html中把數(shù)據(jù)內(nèi)容渲染出來(lái)是用的v-for方法虐呻，寫(xiě)法是v-for="item in items"号俐，items就是數(shù)組名固灵，item就是其中的一個(gè)值磷杏，這里我的數(shù)組名是list，items就是list庇楞，而item榜配，你開(kāi)心叫啥就叫啥。
雙花括號(hào)（大括號(hào)吕晌？反正就是{{}}）里面放的是對(duì)應(yīng)的內(nèi)容蛋褥，比如item的label是要顯示的值，那么li里面就寫(xiě){{ item.label }}聂使，空格多少不需要關(guān)注，我空格是為了看著好看谬俄，以后改的時(shí)候眼睛看著好找柏靶。
樣式就不寫(xiě)了
所以這篇就也結(jié)束了。
