1
git checkout 02-start

v-for

打开示例代码，我们看到我们返回值内有一个列表。

image.png

加入我们需要将这个列表在HTML文档中展示出来，我们并不需要一行一行手动使用插值表达式，vue给我们提供了一个标签内的属性——v-for，可以很方便的循环我们的标签。

在v-for值内我们通过item in items的形式，遍历items内的值

1
2
3
4
5
6
7
8
<div id="app">
    <h1>{{ title }}</h1>
    <ul>
        <li v-for="food in foods">
            <span>{{food.name}}</span>
        </li>
    </ul>
</div>

v-bind

我们可以看到我们在foods的属性内有一个图片属性，如果我们想展示我们的图片，直接使用插值表达式是不可以的，因为插值表达式只会将数据以文本文档的形式展示到网页上，并不能展示图片等。

此时我们需要用到vue中提供的v-bind来与HTML中属性和数据进行绑定。对于我们不同的HTML标签，我们可以在其属性前面加上v-bind:为属性与数据进行绑定

1
2
3
4
5
6
<ul>
    <li v-for="food in foods">
        <img v-bind:src="food.image">
        <span>{{food.name}}</span>
    </li>
</ul>

值得注意的事，属性内并不需要使用插值表达式，直接使用属性即可。

v-model

v-bind是单向的，是从Vue里直接反应到DOM上的。而这里介绍的v-model是双向的，Vue变动DOM会变动，且DOM变动Vue也会变动。

加入我们现在需要写一个复选框，让Vue的属性发生变动，且我们可以加入一个值的展示，让我们展示出Vue内值的变化

1
2
3
4
<img v-bind:src="food.image">
<span>{{food.name}}</span>
<input type="checkbox" v-model="food.purchased">
<span>{{food.purchased}}</span>

效果如下所示

image.png