当前位置: 代码迷 >> 综合 >> 2020-08-12 day2VUE基础
  详细解决方案

2020-08-12 day2VUE基础

热度:97   发布时间:2024-02-10 17:40:24.0

事件修饰符

stop:阻止冒泡

    用法:

 <!-- 阻止冒泡行为 --><button @click.stop="add1">点击</button>

prevent:阻止默认行为

    用法:

 <!-- 阻止默认行为 --><a @click.prevent="add1" href="#">点击</a>

按键修饰符

enter:回车键

 <input type="text" @keyup.enter="add">

delete:删除键

 <input type="text" @keyup.delete="delete">

自定义按键修饰符

  // aaa是自定义的修饰符名称,65为字母a的keycode,及aaa=aVue.config.keyCodes.aaa = 65;

class样式动态处理:

       1.对象语法:data数据里要定义isDiv1等变量,值为true时div1样式生效,false时不生效

    <div :class="{div1:isDiv1,div2:isDiv2}"></div>

       2.数组语法:div1Class,div2Class为data定义的两个字符串,其值为样式类名

    <div :class="[div1Class,div2Class]"></div>