Vue是前臺框架,可以獨立完成前後端分離式web項目漸進式的javascript框架 ,今天我們來設計一個簡單的動態按鈕 具體效果圖如下: 點擊後會變成這樣: 點擊後會變成這樣: 首先我們需要下載vue.js:https://vuejs.org/js/vue.min.js 將網頁內的內容全選粘貼至j ...
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>
這樣簡單的點擊動態效果便完成!
