首頁 > 文章 > web前端 > vue.js如何實作點選改變內容

vue.js如何實作點選改變內容

王林原創: 2021-10-12 17:24:402516瀏覽

vue.js實作點擊改變內容的方法：【new Vue({el:"#example",data:{flag:true,btnText:'元/噸',},methods:{showToggle :function(){this.flag ...】。

vue.js如何實作點選改變內容

#本文操作環境：windows10系統、vue.js 2.9、thinkpad t480電腦。

我們要實現點擊切換按鈕，來改變顯示的內容，切換不同的單位。

在下面的程式碼中flag相當於一個開關，透過控制開關的改變，來切換不同的單位。同樣適用於其他的切換內容實例，也可設定按鈕點擊顯示隱藏等。

#具體實作程式碼：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>vue点击切换改变内容</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=&#39;margin-top:8px;font-size:12px;&#39; v-text="btnText" v-show=&#39;flag==true&#39;></p>
       <p style=&#39;margin-top:8px;font-size:12px;&#39; v-text="btnText" v-show=&#39;flag==false&#39;></p>
    </Col>
    <Col span=&#39;2&#39;>
       <span @click=&#39;switchChange&#39;>
       <Icon type="arrow-swap" class=&#39;contractadd_icon&#39;></Icon>      
       </span>
    </Col>
    <script type="text/javascript">  
    new Vue({  
        el:"#example",  
        data:{  
           flag:true,//单位切换开关
           btnText:&#39;元/吨&#39;,
        },  
        methods:{  
            showToggle:function(){  
                this.flag = !this.flag  
                if(this.flag==true){  
                    this.btnText = "元/吨"  
                }else if(this.flag==false){  
                    this.btnText = "元/方"  
                } 
            }  
        }  
    })  
    </script>  
</body>  
</html>

推薦學習：php訓練

以上是vue.js如何實作點選改變內容的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php vue.js JS function this

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：vue.js如何實作可拖曳選單下一篇：vue.js如何實作可拖曳選單

看更多