Computer Science

Vue 指令

2023-06-30 1 min read

Text Interpolation

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

<p> &#123;&#123; value &#125;&#125; </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>

參考/學習文章

← Posts
meow~