今天我們將利用vue的條件指令來完成一個簡易的動態變色功能按鈕
首先我們還是要對vue進行配置.
然後我們要在html頁面上搭建三個簡易的按鈕,顏色分別為紫,綠和藍(顏色隨意)其代碼如下:
這裡的@是v-on事件指令,在這裡要在三個按鈕上設置點擊事件
接著我們要進行條件指令的判斷,其代碼如下:
通過條件來判斷點擊不同的按鈕觸發不同的效果
接下來我們將進行掛載點,事件的渲染以及為事件提供實現體操作
new Vue({
el: '#app',
data: {
pg: 'pg1' },
methods: {
btn_click: function (pg_num) {
this.pg = pg_num
}
}
})
這裡我們設置進入頁面後默認顯示第一個按鈕顯示的圖片,通過點擊來完成事件的轉換.
最後就是把圖片給設置出來啦
.box {
width: 200px;
height: 100px;
background-color: darkgray;
}
.pg1 { background-color: rebeccapurple; }
.pg2 { background-color: yellowgreen; }
.pg3 { background-color: cornflowerblue; }
當然也可以選擇你喜歡的圖片進行放置,這裡我們只是放置顏色填充的框
具體的實現效果如下:
通過不同的點擊來獲得不同的圖片!
整體代碼如下:
Title
.box {
width: 200px;
height: 100px;
background-color: darkgray;
}
.pg1 { background-color: rebeccapurple; }
.pg2 { background-color: yellowgreen; }
.pg3 { background-color: cornflowerblue; }
v-if的顯示與隱藏
v-show的顯示與隱藏
new Vue({
el: '#app',
data: {
is_if: false,
is_show: true,
pg: 'pg1'
},
methods: {
btn_click: function (pg_num) {
this.pg = pg_num
}
}
})
“我們相信人人都可以成為一個WEB前端開發大神，現在開始，找個師兄，帶你入門，學習的路上不再迷茫。這裡是WEB前端開發修真院，初學者轉行到互聯網行業的聚集地。"
大師兄送你套WEB前端入門心法
限時免費獲取方式
▼
領取方法：
關注“速學編程” 然後私信回覆“前端”即可
私信不要多字，不要少字，不要錯字，私信方法：點擊我頭像，進入主頁面，右上角有私信功能，在關注的上方位置。
如果對您有幫助請記得給速學編程先來個“評論+轉發”
關鍵字: background 按鈕 頁面
