How vue.js implements click-to-change content-Vue.js-php.cn

How vue.js implements click-to-change content

王林

Release： 2021-10-12 17:24:40

Original

2538 people have browsed it

vue.js implements the method of clicking to change content: [new Vue({el:"#example",data:{flag:true,btnText:'yuan/ton',},methods:{showToggle :function(){this.flag ...].

How vue.js implements click-to-change content

The operating environment of this article: windows10 system, vue.js 2.9, thinkpad t480 computer.

We need to click the switch button to change the displayed content and switch between different units.

In the following code, flag is equivalent to a switch, and different units can be switched by controlling the change of the switch. The same applies to other instances of switching content, and you can also set the button to click to show, hide, etc.

Detailed implementation code:

<!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>

Copy after login

Recommended learning: php training

The above is the detailed content of How vue.js implements click-to-change content. For more information, please follow other related articles on the PHP Chinese website!