vue實現(xiàn)動態(tài)按鈕功能

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

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

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

具體效果圖如下:

點擊后會變成這樣:

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

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

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

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

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

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

語法:v-on:事件名 = "事件變量"

事件變量:由vue實例的methods提供

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

具體代碼如下:

<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為事件提供實現(xiàn)體進(jìn)行點擊來判斷按鈕的my_cls屬性來實現(xiàn)具體效果

最后我們在head上設(shè)置style樣式:

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

使用Vue快速實現(xiàn)一個無縫輪播效果
這篇文章主要為大家詳細(xì)介紹了如何使用Vue快速實現(xiàn)一個無縫輪播效果,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以參考下
2024-04-04
vue3中defineEmits的使用舉例詳解
這篇文章主要給大家介紹了關(guān)于vue3中defineEmits使用的相關(guān)資料,在Vue3中可以使用defineEmits函數(shù)來定義組件的自定義事件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
vue如何限制只能輸入正負(fù)數(shù)及小數(shù)
這篇文章主要介紹了vue如何限制只能輸入正負(fù)數(shù)及小數(shù),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-07-07
vue 實現(xiàn)axios攔截、頁面跳轉(zhuǎn)和token 驗證
這篇文章主要介紹了vue 實現(xiàn)axios攔截、頁面跳轉(zhuǎn)和token 驗證，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-07-07
vue項目引入svg圖標(biāo)的完整步驟
在實際的項目開發(fā)中,使用svg圖標(biāo)占用內(nèi)存比圖片更小,映入圖片內(nèi)存比較大,同時也適用于不同屏幕的尺寸,下面這篇文章主要給大家介紹了關(guān)于vue項目引入svg圖標(biāo)的完整步驟,需要的朋友可以參考下
2022-10-10
ant-design-vue前端UI庫,如何解決Table中時間格式化問題
這篇文章主要介紹了ant-design-vue前端UI庫,如何解決Table中時間格式化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue移動端微信授權(quán)登錄插件封裝的實例
今天小編就為大家分享一篇vue移動端微信授權(quán)登錄插件封裝的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Vue中插入HTML代碼的方法
這篇文章主要介紹了Vue中插入HTML代碼的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
.eslintrc配置目錄及配置項的使用方式
這篇文章主要介紹了.eslintrc配置目錄及配置項的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue中ref和e.target的區(qū)別以及ref用法
這篇文章主要介紹了vue中ref和e.target的區(qū)別以及ref用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03