Vue是前臺框架,可以獨立完成前后端分離式web項目漸進式的javascript框架 ,今天我們來設計一個簡單的動態按鈕
具體效果圖如下:
點擊后會變成這樣:
首先我們需要下載vue.js: https://vuejs.org/js/vue.min.js
將網頁內的內容全選粘貼至js文件中
然后我們先創建一個html文件
在body創建一個按鈕具體代碼如下:
<body><div id="app"><button v-on:click="btnClick" v-bind:class="my_cls">{{ msg }}</button> </div></body>這里的v-on來為事件綁定方法，事件用 :事件名 標注
語法:v-on:事件名 = "事件變量"
事件變量:由vue實例的methods提供
按鈕創建完成我們需要在body下進行script添加vue并設置點擊事件:
具體代碼如下:
<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為事件提供實現體 進行點擊來判斷按鈕的my_cls屬性來實現具體效果
最后我們在head上設置style樣式:
<style> .btn { width: 100px; height: 40px; background: orange; } .botton { width: 200px; height: 80px; background-color: yellowgreen; } </style>總結
以上所述是小編給大家介紹的vue實現動態按鈕功能，非常不錯，具有一定的參考借鑒價值，需要的朋友參考借鑒價值。
新聞熱點
疑難解答
