标签:css class ret item rop height orange index fun
<template> <div> <ul> <li @click="change(index)" :key=‘item.id‘ v-for="(item,index) in list">{{item.title}}</li> </ul> <div class="div-class"> <img v-show="index==currentId" :style=‘getImgStyle()‘ :key="item.id" v-for="(item,index) in list" :src="item.path"> </div> </div> </template> <script> export default { name: "HelloWorld", props:{ }, data() { return { currentId : 0, isImg_currnt : false, list:[{ id:1, title:‘apple‘, path:require(‘../img/mmexport1578014408066.jpg‘) },{ id:2, title:‘orange‘, path:require(‘../img/mmexport1578014452372.jpg‘) },{ id:3, title:‘lemon‘, path:require(‘../img/mmexport1578014461314.jpg‘) } ] }; }, methods: { change:function(index){ this.currentId = index }, getImgStyle:function(){ return{ paddingLeft:"500px", width:"200px", height:"400px", display:"block" } } } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> li{ display: inline-block; width: 100px; height: 20px; border:1px solid blue } .img-currnt{ display:block } img{ display:none } </style>
标签:css class ret item rop height orange index fun
原文地址:https://www.cnblogs.com/theShyer/p/12184392.html