vue中的條件渲染

發(fā)布時(shí)間：2020-06-16 10:07:27 來(lái)源：網(wǎng)絡(luò) 閱讀：334 作者：梁十八欄目：web開發(fā)

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="app"   @click="handleClick">

    //v-show:已經(jīng)渲染，只是隱藏或顯示<br>
    <div v-if="show">{{message}}</div>
    //v-if:存在或不存在(移除)。很顯然v-show性能更高，它不用刪除、添加<br>
    <div v-show="show">{{message}}</div>

    //if else語(yǔ)句<b >(注意，if、else標(biāo)簽之間不能有阻隔，否則報(bào)錯(cuò))</b>：<br>
    <div v-if="show">if</div>
    <div v-else="show">else</div>

    //if else ifelse(同樣要連在一起寫)<br>
    <div v-if="show == 'a'">a</div>
    <div v-else-if="show == 'b'">b</div>
    <div v-else="show">other</div>

    //一個(gè)詭異的現(xiàn)象：帳號(hào)、郵箱再怎么切換，input中輸入的內(nèi)容不變(vue會(huì)盡量復(fù)用，但是并沒(méi)有清空內(nèi)容)<br>
    <div v-if="show">
        帳號(hào):<input type="text" name="account"/>
    </div>
    <div v-else>
        郵箱:<input type="text" name="email"/>
    </div>
    //解決辦法是加key(當(dāng)給一個(gè)元素加key值的時(shí)候，vue會(huì)知道它是唯一元素，如果不一樣則不復(fù)用值)<br>
    <div v-if="show">
        帳號(hào):<input type="text" name="account" key="account" />
    </div>
    <div v-else>
        郵箱:<input type="text" name="email" key="email" />
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            show: false,
            message: "hello world"
        },
        methods: {
            handleClick: function() {
                this.show = !this.show
            }
        }
    });
</script>
</body>
</html>

向AI問(wèn)一下細(xì)節(jié)

vue中的條件渲染

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽