【完整程式碼附於文末】

如果我們想要把 data 的資料渲染到畫面上，有以下幾種方式將資料綁定至 DOM:

v-text

標籤渲染的好處 :
如果想要文字加粗的話，就可以把<span>的部分改成<strong>來進行文字加粗。

<p><strong v-text="name"></strong>在<span v-text="position" ></span>吃早餐</p>

{{ }}

<p>{{ name }}在{{ position }}吃早餐</p>

這兩個的 render 效果一樣，只是 v-text 可以在標籤上渲染，因此比 {{}} 再更靈活一點。

V-html : 包含html元素的渲染

如果我們希望渲染的內容 包含html元素，那麼可以使用 v-html

 <p v-html="rawHtml"></p>

v-once : 單次綁定的渲染

使用v-once之後，在第一次渲染之後，就不會再變更內容。

  <p v-once>{{ name }}在{{ position }}吃早餐</p>

v-pre : 避免文字被轉譯的渲染

使用v-pre可以避免文字被轉譯，資料內容也不會被帶出來。

<p v-pre> 這段文字不會被轉譯：{{ name }}在{{ position }}吃早餐</p>

表達式

此外，我們也可以透過表達式來花式(?) 渲染我們需要的內容 :

<p>樣板字面值 : {{` ${name}在${position}吃早餐`}}</p>
<p>反轉字串 : {{ text.split('').reverse().join('') }}</p>
<p>綁定methods : {{ say('杰倫') }}</p>
<p>JS運算 : {{ 1+1 }}</p>

※ 如果你不想一直用 console.log 檢查資料狀態，可以直接把data渲染在畫面上看~

 <p>顯示幕前的陣列內容{{ products }}</p>

const App = {
  name: 'component',
  data() {
    return {
      name: '小明',
      position: '早餐店',
      text: '小明在早餐店吃早餐',
      rawHtml: '<p>小明在早餐店吃早餐</p>',
      products: [
        {
          name: '蛋餅',
          price: 30,
          vegan: false
        },
        {
          name: '飯糰',
          price: 35,
          vegan: false
        },
        {
          name: '小籠包',
          price: 60,
          vegan: false
        },
        {
          name: '蘿蔔糕',
          price: 30,
          vegan: true
        }
      ],
      selected: [
        {
          name: '蛋餅',
          price: 30,
          vegan: false
        },
        {
          name: '飯糰',
          price: 35,
          vegan: false
        },
      ]
    }
  },
  methods: {
    say(name) {
      return `${name}在${this.position}吃早餐`
    }
  },
  computed: {
    total() {
      const total = this.selected.reduce((curr, next) => {
        return curr + next.price;
      }, 0);
      console.log(total);
      return total;
    }
  },
  created() {

  }
};

Vue.createApp(App).mount('#app');