vue之神奇的动态按钮

今天我们将利用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事件指令,在这里要在三个按钮上设置点击事件

接着我们要进行条件指令的判断,其代码如下:

        <div class="box pg1" v-if="pg == 'pg1'" key="pg1"></div><div class="box pg2" v-else-if="pg == 'pg2'" key="pg2"></div><div class="box pg3" v-else key="pg3"></div>

通过条件来判断点击不同的按钮触发不同的效果

接下来我们将进行挂载点,事件的渲染以及为事件提供实现体操作

<script>new Vue({el: '#app',data: {pg: 'pg1'},methods: {btn_click: function (pg_num) {this.pg = pg_num}}})
</script>

这里我们设置进入页面后默认显示第一个按钮显示的图片,通过点击来完成事件的转换.

最后就是把图片给设置出来啦

    <style>.box {width: 200px;height: 100px;background-color: darkgray;}.pg1 { background-color: rebeccapurple; }.pg2 { background-color: yellowgreen; }.pg3 { background-color: cornflowerblue; }</style>

　　当然也可以选择你喜欢的图片进行放置,这里我们只是放置颜色填充的框

具体的实现效果如下:

通过不同的点击来获得不同的图片!

整体代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box {width: 200px;height: 100px;background-color: darkgray;}.pg1 { background-color: rebeccapurple; }.pg2 { background-color: yellowgreen; }.pg3 { background-color: cornflowerblue; }</style>
</head>
<body>
<div id="app"><p v-if="is_if" key="my_if">v-if的显示与隐藏</p><p v-show="is_show" key="my_show">v-show的显示与隐藏</p><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><div class="box pg1" v-if="pg == 'pg1'" key="pg1"></div><div class="box pg2" v-else-if="pg == 'pg2'" key="pg2"></div><div class="box pg3" v-else key="pg3"></div></p>
</div></body>
<script src="js/vue.min.js"></script>
<script>new Vue({el: '#app',data: {is_if: false,is_show: true,pg: 'pg1'},methods: {btn_click: function (pg_num) {this.pg = pg_num}}})
</script>
</html>

View Code

这样神奇的动态Vue按钮便完成啦

转载于:https://www.cnblogs.com/gengbinjia/p/10863931.html

vue之神奇的动态按钮相关推荐

vue利用 vue-animate-number插件动态展示数字（从0动态滚动到指定数字）
vue利用 vue-animate-number插件动态展示数字(从0动态滚动到指定数字) 第一步:安装vue-animate-number插件 $ npm install vue-animate-n ...
isotope神奇的动态布局库
HTML5应用开发:神奇的动态布局库isotope教程 1. isotope介绍 Isotope 是一个jQuery的插件,用来实现精美的动态元素布局.可以到http://isotope.metafi ...
vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用代码如下: <el-table-column align="center" label="宠物图片& ...
【推荐】8款神奇的动态网页布局及其制作方法
[CSDN编译]本文为您总结了8款神奇的动态网页布局及其制作方法,文中还列出了3款jQuery插件来帮助开发者实现这些效果. 案例分享: Gimme Bar MKSD Architects Mark ...
MFC动态按钮的创建及其消息响应和自定义消息
原文链接: http://www.cnblogs.com/gaohongchen01/p/4046525.html 动态按钮(多个)的创建: 1.在类中声明并定义按钮控件的ID #define IDC ...
vue 根据组件地址动态加载异步组件
要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件目录结构 index.html components/component1 components/ ...
php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...
Atitit 动态按钮图片背景颜色与文字组合解决方案
Atitit 动态按钮图片背景颜色与文字组合解决方案转换背景颜色,setFont("cywe_img", fontScale, 50, 5) 设置文字大小与坐标文字分拆,使用字 ...
2021-08-05 Vue+D3实现一个动态的流程图
标题 Vue+D3实现一个动态的流程图解决了D3v6传参的一些问题(鼠标经过获取不到节点等) 能够像动画一样自动播放的流程图根据数据自动生成节点,不需要自己手写节点的位置附上D3.js官网链接: ...

vue之神奇的动态按钮

vue之神奇的动态按钮相关推荐

最新文章

热门文章