<div class="container">
    <div class="row" id="app">
      <div class="col-sm-6"><img :src="img" :alt="h1"></div>
      <div class="col-sm-6"> 
        <h1 v-text ="h1"></h1>
        <p v-html="info"></p>
        <span v-text = "money"></span>
        <br>
        <a :href="link" class="buy-link" :title="h1">我要購買</a>
      </div>
    </div>
  </div>
 img{max-width: 100%;}
 .buy-link{border:solid 1px #333; color:#333; text-decoration: none; padding:5px 10px; display: inline-block; margin-top:20px;}
new Vue({
  el: '#app',
  data () {
    return {
      info: null,
      h1: null,
      img: null,
      money: null,
      link: null
    }
  },
  mounted () {
    axios
      .get('https://spreadsheets.google.com/feeds/list/11b9VsYo8DRZ8j5uDT64d6PfmWHGaW5nE9qVwo-wGnbs/1/public/values?alt=json')
      .then(response =>{
        this.h1 = JSON.parse(JSON.stringify(response.data))['feed']['entry'][3]['gsx$_cokwr']['$t'];
        this.info = JSON.parse(JSON.stringify(response.data))['feed']['entry'][5]['gsx$_cokwr']['$t'];
        this.img = JSON.parse(JSON.stringify(response.data))['feed']['entry'][4]['gsx$_cokwr']['$t'];
        this.money = JSON.parse(JSON.stringify(response.data))['feed']['entry'][6]['gsx$_cokwr']['$t'];
        this.link = JSON.parse(JSON.stringify(response.data))['feed']['entry'][2]['gsx$_cokwr']['$t'];
        console.log(JSON.parse(JSON.stringify(response.data))['feed']['entry'][0]['gsx$_cokwr']['$t']);
        console.log(JSON.parse(JSON.stringify(response.data))['feed']['entry'][1]['gsx$_cokwr']['$t']);
        console.log(JSON.parse(JSON.stringify(response.data))['feed']['entry'][2]['gsx$_cokwr']['$t']);
        console.log(JSON.parse(JSON.stringify(response.data))['feed']['entry'][3]['gsx$_cokwr']['$t']);
        console.log(JSON.parse(JSON.stringify(response.data))['feed']['entry'][4]['gsx$_cokwr']['$t']);
        console.log(JSON.parse(JSON.stringify(response.data))['feed']['entry'][5]['gsx$_cokwr']['$t']);
        console.log(JSON.parse(JSON.stringify(response.data))['feed']['entry'][6]['gsx$_cokwr']['$t']);
      });
  }
});

External CSS

  1. https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css

External JavaScript

  1. https://unpkg.com/vue@2.5.13/dist/vue.min.js
  2. https://unpkg.com/axios/dist/axios.min.js