今天我们将利用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 按钮 页面
