本文通过实例展示了如何使用Vue的条件指令v-if和v-else-if实现动态变色按钮。当点击不同颜色的按钮时，会显示对应颜色的背景框。通过设置data属性和事件监听方法btn_click，实现了按钮点击事件与视图更新的绑定。
今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮
首先我们还是要对vue进行配置.
然后我们要在html页面上搭建三个简易的按钮,颜色分别为紫,绿和蓝(颜色随意)其代码如下:
<body>
<div id="app">
<p>
<button @click="btn_click('pg1')" :style="{background:'rebeccapurple'}">紫</button>
<button @click="btn_click('pg2')" :style="{background:'yellowgreen'}">绿</button>
<button @click="btn_click('pg3')" :style="{background:'cornflowerblue'}">蓝</button>
</p>
</div>
</body>
这里的@是v-on事件指令,在这里要在三个按钮上设置点击事件
接着我们要进行条件指令的判断,其代码如下:
最低0.47元/天 解锁文章
扫一扫
3041
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
