vue.js怎么實(shí)現(xiàn)單擊改變內(nèi)容

發(fā)布時(shí)間：2021-10-15 11:02:45 來源：億速云閱讀：160 作者：小新欄目：編程語言

這篇文章主要介紹了vue.js怎么實(shí)現(xiàn)單擊改變內(nèi)容，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

vue.js實(shí)現(xiàn)單擊改變內(nèi)容的方法：【new Vue({el:"#example",data:{flag:true,btnText:'元/噸',},methods:{showToggle:function(){this.flag ...】。

本文操作環(huán)境：windows10系統(tǒng)、vue.js 2.9、thinkpad t480電腦。

我們要實(shí)現(xiàn)點(diǎn)擊切換按鈕，來改變顯示的內(nèi)容，切換不同的單位。

在下面的代碼中flag相當(dāng)于一個(gè)開關(guān)，通過控制開關(guān)的改變，來切換不同的單位。同樣適用于其他的切換內(nèi)容實(shí)例，也可設(shè)置按鈕點(diǎn)擊顯示隱藏等。

具體實(shí)現(xiàn)代碼：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>vue點(diǎn)擊切換改變內(nèi)容</title>  
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>  
</head>  
<body>  
    <Col span="2" style="text-align: center;">
       <p style='margin-top:8px;font-size:12px;' v-text="btnText" v-show='flag==true'></p>
       <p style='margin-top:8px;font-size:12px;' v-text="btnText" v-show='flag==false'></p>
    </Col>
    <Col span='2'>
       <span @click='switchChange'>
       <Icon type="arrow-swap" class='contractadd_icon'></Icon>      
       </span>
    </Col>
    <script type="text/javascript">  
    new Vue({  
        el:"#example",  
        data:{  
           flag:true,//單位切換開關(guān)
           btnText:'元/噸',
        },  
        methods:{  
            showToggle:function(){  
                this.flag = !this.flag  
                if(this.flag==true){  
                    this.btnText = "元/噸"  
                }else if(this.flag==false){  
                    this.btnText = "元/方"  
                } 
            }  
        }  
    })  
    </script>  
</body>  
</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue.js怎么實(shí)現(xiàn)單擊改變內(nèi)容”這篇文章對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

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

vue.js怎么實(shí)現(xiàn)單擊改變內(nèi)容

猜你喜歡

最新資訊

相關(guān)推薦

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