使用Vue.js怎么實(shí)現(xiàn)點(diǎn)擊切換按鈕改變內(nèi)容

發(fā)布時(shí)間：2021-05-26 11:28:50 來(lái)源：億速云閱讀：2138 作者：Leah 欄目：web開(kāi)發(fā)

今天就跟大家聊聊有關(guān)使用Vue.js怎么實(shí)現(xiàn)點(diǎn)擊切換按鈕改變內(nèi)容，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

代碼描述：點(diǎn)擊切換按鈕，來(lái)改變顯示的內(nèi)容，切換不同的單位。flag相當(dāng)于一個(gè)開(kāi)關(guān)，控制開(kāi)關(guān)的改變，來(lái)切換不同的單位。同樣適用于其他的切換內(nèi)容實(shí)例，也可設(shè)置按鈕點(diǎn)擊顯示隱藏等。

<!DOCTYPE html> 
<html> 
<head> 
 <meta charset="utf-8"> 
 <title>vue點(diǎn)擊切換改變內(nèi)容</title> 
 <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 
</head> 
<body> 
 <Col span="2" >
  <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,//單位切換開(kāi)關(guān)
   btnText:'元/噸',
  }, 
  methods:{ 
   showToggle:function(){ 
    this.flag = !this.flag 
    if(this.flag==true){ 
     this.btnText = "元/噸" 
    }else if(this.flag==false){ 
     this.btnText = "元/方" 
    } 
   } 
  } 
 }) 
 </script> 
</body> 
</html>

拓展知識(shí)：vue 點(diǎn)擊按鈕改變頁(yè)面顯示內(nèi)容的方法

如下所示：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="one">
 <template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
 </template>
 <template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
 </template>
 <button @click="change">change</button>
</div>
 
 
<script type="text/javascript">
 var vm = new Vue({
  el:'#one',
  data:{
   loginType : 'username'
  },
  methods:{
   change:function(){
    if(this.loginType=='username'){
     this.loginType='email'
    }
    else{
     this.loginType='username'
    }
   }
  }
 })
</script>
 
 
</body>
</html>

看完上述內(nèi)容，你們對(duì)使用Vue.js怎么實(shí)現(xiàn)點(diǎn)擊切換按鈕改變內(nèi)容有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問(wèn)一下細(xì)節(jié)

使用Vue.js怎么實(shí)現(xiàn)點(diǎn)擊切換按鈕改變內(nèi)容

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽