vue實(shí)現(xiàn)動(dòng)態(tài)按鈕功能

更新時(shí)間：2019年05月13日 17:20:48 作者：777ijBGly-

這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)按鈕功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

Vue是前臺(tái)框架,可以獨(dú)立完成前后端分離式web項(xiàng)目漸進(jìn)式的javascript框架 ,今天我們來(lái)設(shè)計(jì)一個(gè)簡(jiǎn)單的動(dòng)態(tài)按鈕

具體效果圖如下:

點(diǎn)擊后會(huì)變成這樣:

首先我們需要下載vue.js: https://vuejs.org/js/vue.min.js

將網(wǎng)頁(yè)內(nèi)的內(nèi)容全選粘貼至js文件中

然后我們先創(chuàng)建一個(gè)html文件

在body創(chuàng)建一個(gè)按鈕具體代碼如下:

<body>
<div id="app">
<button v-on:click="btnClick"  v-bind:class="my_cls">{{ msg }}</button>
  </div>
</body>

這里的v-on來(lái)為事件綁定方法，事件用 :事件名標(biāo)注

語(yǔ)法:v-on:事件名 = "事件變量"

事件變量:由vue實(shí)例的methods提供

按鈕創(chuàng)建完成我們需要在body下進(jìn)行script添加vue并設(shè)置點(diǎn)擊事件:

具體代碼如下:

<script src="js/vue.min.js"></script>
<script>
  new Vue({
    el:'#app',
    data:{
      msg:'按鈕',
      my_cls:'btn'
    },
    methods:{
      btnClick:function(){
        if(this.my_cls=='btn'){
          this.my_cls='botton'
        }else{
          this.my_cls='btn'
        }
      }
    }
  })
</script>

methods為事件提供實(shí)現(xiàn)體進(jìn)行點(diǎn)擊來(lái)判斷按鈕的my_cls屬性來(lái)實(shí)現(xiàn)具體效果

最后我們?cè)趆ead上設(shè)置style樣式:

<style>
    .btn {
      width: 100px;
      height: 40px;
      background: orange;
    }
    .botton {
      width: 200px;
      height: 80px;
      background-color: yellowgreen;
    }
  </style>

總結(jié)

以上所述是小編給大家介紹的vue實(shí)現(xiàn)動(dòng)態(tài)按鈕功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考借鑒價(jià)值。

您可能感興趣的文章:

相關(guān)文章

el-form-item表單label添加提示圖標(biāo)的實(shí)現(xiàn)
本文主要介紹了el-form-item表單label添加提示圖標(biāo)的實(shí)現(xiàn),我們將了解El-Form-Item的基本概念和用法,及添加提示圖標(biāo)以及如何自定義圖標(biāo)樣式,感興趣的可以了解一下
2023-11-11
vue實(shí)現(xiàn)圖片懶加載的方法分析
這篇文章主要介紹了vue實(shí)現(xiàn)圖片懶加載的方法,結(jié)合實(shí)例形式分析了vue.js圖片懶加載插件安裝、使用方法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2020-02-02
vue-cli設(shè)置css不生效的解決方法
這篇文章主要介紹了vue-cli設(shè)置css不生效的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-02-02
關(guān)于Vue3中element-plus的el-dialog對(duì)話框無(wú)法顯示的問(wèn)題及解決方法
最近今天在寫(xiě)一個(gè)停車(chē)場(chǎng)管理系統(tǒng)的項(xiàng)目時(shí),在用vue3寫(xiě)前端時(shí),在前端模板選擇上,我一時(shí)腦抽,突然決定放棄SpringBoot,選擇了以前幾乎很少用的element-plus,然后果不其然,錯(cuò)誤連連,下面給大家分享dialog對(duì)話框無(wú)法顯示的原因,感興趣的朋友一起看看吧
2023-10-10
Vue常用指令V-model用法
本篇文章主要介紹了Vue常用指令_V-model用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03
vue3+vite+ts使用require.context問(wèn)題
這篇文章主要介紹了vue3+vite+ts使用require.context問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
自帶氣泡提示的vue校驗(yàn)插件（vue-verify-pop）
這篇文章主要為大家詳細(xì)介紹了自帶氣泡提示的vue校驗(yàn)插件，vue-verify-pop的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
vue實(shí)現(xiàn)上傳圖片添加水印(升級(jí)版)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)上傳圖片添加水印的升級(jí)版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
Element?UI?table參數(shù)中的selectable的使用及遇到坑
這篇文章主要介紹了Element?UI?table參數(shù)中的selectable的使用及遇到的坑，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-08-08
vue監(jiān)聽(tīng)瀏覽器網(wǎng)頁(yè)關(guān)閉和網(wǎng)頁(yè)刷新事件代碼示例
在前端開(kāi)發(fā)中我們通常會(huì)遇到這樣的需求,用戶(hù)離開(kāi)、刷新頁(yè)面前,修改數(shù)據(jù)未進(jìn)行保存操作,需要提示框提醒用戶(hù),這篇文章主要給大家介紹了關(guān)于vue監(jiān)聽(tīng)瀏覽器網(wǎng)頁(yè)關(guān)閉和網(wǎng)頁(yè)刷新事件的相關(guān)資料,需要的朋友可以參考下
2023-08-08