轮播轮播 <img :src=`./images/${number}.jpg` style="width: 300px;

<body> <div id="app"> <h3>{{ number }}</h3>  <img :src=`./images/$ {number}.jpg` style="width: 300px;">

  <button @click="prev">上一张</button>
  <button @click="next">下一张</button>
  <ul>
    <li v-for="(value,index) in 3">
        <a href="#" @click="jump(value)">{{ value }}</a>
    </li>
  </ul>
</div>
<script type="module">
    import { createApp ,ref} from './vue.esm-browser.js'
    createApp({
        //setup选项是用于设置响应式数据和方法的
        setup(){
            const number = ref(1)

            const prev = () =>{
                number.value--
                if(number.value == 0){
                    number.value = 3
                }
            }
            const next = () =>{
                number.value++
                if(number.value == 4){
                    number.value = 1
                }
            }
            const jump = (value) =>{
                number.value = value
            }
            
            return {
                number,
                prev,
                next,
                jump
            }
        }
    }).mount('#app')
</script>