vue实现动态按钮功能
程序员文章站
2023-12-14 09:01:10
vue是前台框架,可以独立完成前后端分离式web项目渐进式的javascript框架 ,今天我们来设计一个简单的动态按钮
具体效果图如下:
点击后会变成这样:...
vue是前台框架,可以独立完成前后端分离式web项目渐进式的javascript框架 ,今天我们来设计一个简单的动态按钮
具体效果图如下:
点击后会变成这样:
首先我们需要下载vue.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>
总结
以上所述是小编给大家介绍的vue实现动态按钮功能，非常不错，具有一定的参考借鉴价值，需要的朋友参考借鉴价值。