zoukankan      html  css  js  c++  java
  • [Vue] Conditionally Render DOM Elements in Vue.js (v-if v-else v-show)

    You can use v-if and v-else to display content based on assertions on your data. Similarly, v-show can be used to render the content, but hide it with css. v-if can also be used on an invisible wrapper <template>element.

    v-if v-else:

    It is good that when you use 'v-if' you wrap the html into '<template>':

                <template v-if="counter > 5">
                    <div>Show if the counter is greater than five</div>
                </template>

    'v-else': will be rendered if the closeset 'v-if' doesn't render:

                <template v-if="counter > 5">
                    <div>Show if the counter is greater than five</div>
                </template>
                <div v-else>Show the counter is smaller than five</div>

    v-show:

                <button @click="dec" v-show="counter > 0">-</button>
                <button @click="inc" v-show="counter < 5">+</button>
  • 相关阅读:
    帮忙看看怎么优化这个最长的sql
    12种不宜使用的Javascript语法
    走格子
    乘法逆元
    完美字符串
    全排列问题
    A. Sorting Railway Cars
    Prim
    矩阵取数
    套题T8&T9
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6347318.html
Copyright © 2011-2022 走看看