Home >Web Front-end >Vue.js >How vue.js implements click-to-change content

How vue.js implements click-to-change content

王林Original: 2021-10-12 17:24:402536browse

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 ...].

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>

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!

php vue.js JS function this

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement draggable menu in vue.jsNext article：How to implement draggable menu in vue.js

See more

How vue.js implements click-to-change content

Related articles