30天学完vue打卡第二天

今天学习了vue的其他常用指令以及制作了书架案例

v-bind：动态设置标签属性

html部分代码：

 <div id="app1">
        <button v-show="index > 0" @click="index--">上一页</button>
        <!-- <img v-bind:src="imgUrl" v-bind:title="msg" alt="" style="width: 100px;height: 100px;"> -->
        <!-- 简写： -->
        <img :src="list[index]" :title="msg" alt="" style="width: 100px;height: 100px;">
        <button v-show="index < list.length - 1" @click="index++">下一页</button>
    </div>

 js部分代码：

 const app1 = new Vue({
            el: '#app1',
            data: {
                index: 0,
                list: [
                    './img/10-01.png',
                    './img/10-02.png',
                    './img/11-00.gif',
                    './img/11-01.gif',
                    './img/11-03.gif',
                    './img/11-04.png',
                    './img/11-05.png'
                ],
                msg: '懒洋洋'
            }
        })

 运行效果图：

 

 

 v-for 循环

html部分代码：

 <div id="app2">
        <h2>水果店</h2>
        <ul>
            <!-- item每一项，index数组下标 -->
            <li v-for="(item,index) in list">{{item}} - {{index}}</li>
        </ul>
    </div>

js部分代码：

    const app2 = new Vue({
            el: '#app2',
            data: {
                list: ['西瓜', '苹果', '香蕉']
            }
        })

运行效果图：