2021-7-7 Vue實現切換圖片功能程式碼
阿新 • • 發佈：2021-07-07
<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div id="app"> <ol> <li v-for="(item,key,index) in obj"><input type="button" :value="key" name="" @click="changeImage"></li> </ol> <View Codediv> <img :src="imgSrc"> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script type="text/javascript"></script> <script type="text/javascript"> //在原生js中使用 var obj={ name:'Source/image/r1.jpg', name1:'Source/image/r2.jpg', name2:'Source/image/r3.jpg' }; new Vue({ el: '#app', data: { obj, imgSrc:'Source/image/r1.jpg' }, methods:{ changeImage:function(event){ this.imgSrc=this.obj[event.target.value]; } } }) </script> </body> </html>
image的src使用相對路徑，效果如下圖