Vue 基础第四篇

最新推荐文章于 2023-04-23 14:05:52 发布

VIP文章 _语义错误

最新推荐文章于 2023-04-23 14:05:52 发布

阅读量261

点赞数 1

分类专栏： VUE 文章标签：前端 java javascript vue.js 开发语言

本文链接：https://blog.csdn.net/m0_66451927/article/details/125727047

版权

3、v-if、v-else-if、v-else

一、v-on 事件监听

前端开发中，经常使用交互。这个时候，我们必须监听用户发生的事件，比如点击、拖拽、键盘事件等等，在Vue中使用v-on指令进行监听。

v-on作用：绑定事件监听器
v-on缩写：@
v-on预期：Function | Inline Statement | Object
v-on参数：event

1、v-on 基础

<body>

<div id="app">
  <h2>{
  {counter}}</h2>
	<!-- 联想之前的 v-bind -->
  <!--<h2 v-bind:title></h2>-->
  <!--<h2 :title></h2>-->
	
  <!-- <button v-on:click="counter++">+</button>
  <button v-on:click="counter--">-</button> -->
	
	<!-- 使用 methods -->
  <!--<button v-on:click="increment">+</button>-->
  <!--<button v-on:click="decrement">-</button>-->
	
	<!-- 语法糖写法 -->
 <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increment() {
        this.counter++
      },

最低0.47元/天解锁文章

_语义错误

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 基础第四篇

v-on事件监听、v-on参数问题、v-on修饰符、JS条件判断：v-if；v-if、v-else；v-if、v-else-if、v-else、v-show 的使用、JS循环遍历：v-for遍历数组、v-for遍历对象、v-for使用过程添加key、哪些数组的方法是响应式的...
复制链接

扫一扫