Vue.js 事件处理器+表单

发布时间：2020-12-16 23:10:42 所属栏目：百科来源：网络整理

导读：Vue.js 事件处理器 template div id ="app" button v-on:click ="fn" click me / button div script var count = 1 ;export default { name: ' App ,data(){ return { name: cyy } },methods:{ fn(e){ console.log( this .name); // cyy if (e){ console.log

Vue.js 事件处理器

<template>
  div id="app">
    button v-on:click="fn">click me</buttondiv>
>

script>
var count=1;
export default {
  name: 'App,data(){
    return{
      name:cyy
    }
  },methods:{
    fn(e){
      console.log(this.name);//cyy
      if(e){
        console.log(e.target.tagName);BUTTON
      }
    }
  },}

style scopedstyle>

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

="fn('success')"="fn('fail')">

Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

.stop
.prevent
.capture
.self
.once

<!-- 阻止单击事件冒泡 -->
a v-on:click.stop="doThis"></a 提交事件不再重载页面 form v-on:submit.prevent="onSubmit"form 修饰符可以串联  v-on:click.stop.prevent="doThat" 只有修饰符  添加事件侦听器时使用事件捕获模式 v-on:click.capture>... 只当事件在该元素本身（而不是子元素）触发时触发回调 v-on:click.self click 事件只能点击一次，2.1.4版本新增 v-on:click.once>

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

 只有在 keyCode 是 13 时调用 vm.submit() input v-on:keyup.13="submit">

Vue 为最常用的按键提供了别名：

 同上 v-on:keyup.enter 缩写语法 @keyup.enter>

全部的按键别名：

.enter
.tab
.delete?(捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

input 
      ="fn" 
      v-on:keyup.tab
      v-on:keyup.delete
      v-on:keyup.esc
      v-on:keyup.space
      v-on:keyup.up
      v-on:keyup.down
      v-on:keyup.left
      v-on:keyup.right
      v-on:keyup.ctrl
      v-on:keyup.alt
      v-on:keyup.shift
      v-on:keyup.meta="fn"
    />enter
  >

当绑定 v-on:click 事件时，想传入参数同时也传入当前元素：

 这里必须使用$event -->
    p @click="fn('cyy',$event)">bind methods fnp>

Vue.js?表单

用 v-model 指令在表单控件元素上创建双向数据绑定。

v-model 会根据控件类型自动选取正确的方法来更新元素。

实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：

type="text" v-model="text">{{text}}>

    textarea cols="30" rows="3"="textarea"textarea>{{textarea}}{
      text:this is a long text>

复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：

 单个复选框 ="checkbox" id="one"="checked"label for="#one">{{checked}}labelbr 多个复选框  name="more"="item1" value="moreChecked"="#item1">item1="item2"="#item2">item2="item3"="#item3">item3>you checked:{{moreChecked}}{
      checked:true>

以下实例中演示了单选按钮的双向数据绑定：

 单选按钮 ="radio">you checked:{{checked}}item1>

以下实例中演示了下拉列表的双向数据绑定：

select name="choose"="choose">
      option value="">请选择option="item1"="item2"select>you choose:{{choose}}{
      choose:''>

.lazy

在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

 在 "change" 而不是 "input" 事件中更新  v-model.lazy="text2">{{text2}}>

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。

="number" v-model.number="num">{{num}}{
      num:0>

如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

>
  
     过滤空格  v-model.trim>

?我好像没成功……

全选与取消全选：

="check"="checked" @change="changeAll()">{{checked?'取消全选':'全选'}}
    />
    ="mylist"="checkedList">

  falseitem2item3]
    }
  },methods:{
    changeAll(){
      (.checked){
        .checkedList.checkedArr;
      }else{
        [];
      }
    }
  },watch:{
    checkedList(){
      .checkedList.length===.checkedArr.length){
        .checked;
      };
      }
    }
  }
}

>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!