ホームページ >ウェブフロントエンド >Vue.js >vue.js がクリックして変更するコンテンツを実装する方法
vue.js は、クリックしてコンテンツを変更するメソッドを実装します: [new Vue({el:"#example",data:{flag:true,btnText:'yuan/ton',},methods:{ showToggle :function(){this.flag ...].
この記事の動作環境: 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='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,//单位切换开关
btnText:'元/吨',
},
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 中国語 Web サイトの他の関連記事を参照してください。