03-图片切换和列表渲染

图片切换功能

简写 

v-bind:title= ""  简写为 :title= ""

v-on:click=""简写为@click=""

图片切换功能案例

    <div id="app">
        <img :src="src" alt="">
        <button @click="changePic(0)">1</button>
        <button @click="changePic(1)">2</button>
        <button @click="changePic(2)">3</button>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        图片切换
        Vue.createApp({
            data(){
                return{
                    src:"images/1.png",
                    list:[
                        "images/1.png",
                        "images/2.png",
                        "images/3.png",
                        "images/4.png"
                    ]
                }
            },
            methods:{
                changePic(i){
                    this.src = this.list[i]
                }
            }
        }).mount("#app")
        </script>

列表渲染功能

v-for="i in list "  {{i}}   for循环渲染

    <div id="ad">
        <button @click="insert">添加</button>
        <ul>
            <li v-for="item in list">
                {{item}}
            </li>
        </ul>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        // 渲染列表 
        Vue.createApp({
            data(){
                return{
                    list:["不知火","入内雀","彼岸花"]
                }
            },
            methods:{
                insert(){
                    this.list.push("玉藻前")
                }
            }
        }).mount("#ad")

图片切换精简

<div id="app">
    <img :src="src" alt="">
    <!-- index 获取索引 -->
    <button 
    v-for="itme,index in list"
    @click="changePic(index)">    
        {{index + 1}}
    </button>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
    // 图片切换
    Vue.createApp({
        data(){
            return{
                src:"images/1.png",
                list:[
                    "images/1.png",
                    "images/2.png",
                    "images/3.png",
                    "images/4.png"
                ]
            }
        },
        methods:{
            changePic(i){
                this.src = this.list[i]
            }
        }
    }).mount("#app")

for循环渲染 第一个item获取元素  第二个index获取索引