点击后会变成这样:
<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>
这样简单的点击动态效果便完成!
如对本文有疑问, 点击进行留言回复!!
荐 AJAX初识Day1——POST & GET请求
海创软件组--20200712--axios上传文件获取进度--js对多个四边形的点对象数组分别按顺时针排序--定义上传视频并可预览
网友评论