# Text Interpolation

Using the "Mustache" syntax (double curly braces 兩個大括號 {{ }} )

<p> {{ value }} </p>

But Mustaches cannot be used inside HTML attributes.

# v-bind

用法

<div v-bind:[attribute]="[Vue data]"></div>

# v-if 、 v-else-if 、 v-else

用法

<p v-if="score >= 80">Perfect</p>

<p v-else-if="scroe > 60">Good</p>

<p v-else>Poor</p>

• A condition, or "if-statement", is something that is either true or false .
• A condition is often a comparison check between two values like in the example above to see if one value is greater than the other.
  • We use comparison operators like < , >= or !== to do such checks.
  • Comparison checks can also be combined with logical operators such as && or || .

<script>

export default {

    data() {

        return {

            text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'

        }

    }

}

</script>

<template>

    <p v-if="text.includes('pizza')">The text includes the word 'pizza'</p>

    <p v-else>The word 'pizza' is not found in the text</p>

</template>

# v-show

當條件為 false 時，該指令通過將 CSS display 屬性值設置為 none 來隱藏元素。

<script>

export default {

    data() {

        return {

            showDiv: true

        }

    }

}

</script>

<template>

    <div v-show="showDiv">This div tag can be hidden</div>

</template>

# 參考 / 學習文章

• 官方文件
• w3school
• 維基百科
• MDN web docs
• Vue.js 30 天隨身包系列