vue.js實作點擊改變內容的方法：【new Vue({el:"#example",data:{flag:true,btnText:'元/噸',},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中文網其他相關文章！
