<div id="app">
  <div class="p-5">
    {{`外層imgUrl的值:${imgUrls}`}}
    <photoarray :url="imgUrls"></photoarray>
  </div>
</div>
const app = Vue.createApp({
  data() {
    return {
      imgUrls:['https://images.unsplash.com/photo-1697369964069-b4730db68547?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDEwNzk2MTl8&ixlib=rb-4.0.3&q=85',
               'https://images.unsplash.com/photo-1698725224267-472f2f3cf858?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDEwNzk2MTl8&ixlib=rb-4.0.3&q=85']
    };
  },
});
app.component('photoarray', {
  props:['url'],
  template:` 
  <img :src="url[1]" class="img-thumbnail" alt>
  <input type="text" class="form-control" v-model.lazy="url[1]">
  {{url[1]}}
  `
});
app.mount('#app');
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.prod.min.js