图片切换案例

2024-04-17 18:07:01

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>图片切换案例</title>

</head>

<body>

<div id="app">

<button v-show="index>0" @click="index--">上一页</button>

<img v-bind:src="list[index]" v-bind:title="msg" alt="">

<button v-show="index < list.length-1" @click="index++">下一页</button>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>

const app = new Vue({

el:'#app',

data:{

list:[

'./img/1.jpg',

'./img/2.jpg',

'./img/3.jpg',

'./img/4.jpg'

],

index:0,

msg:'图片'

}

})

//data中的数据，是会被添加到实列上

//1.访问数据实列.属性名

//2.修改数据实列.属性名=新值

</script>

</body>

</html>