2019-10-31 vue随笔记录

1.系统修饰键:

.ctrl

.alt

.shift

.meta

注意:在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。

<!-- Alt + C -->

<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->

<div @click.ctrl="doSomething">doSomething</div>

请注意修饰键与常规按键不同,在和 keyup 事件一起用时,事件触发时修饰键必须处于按下状态。换句话说,只有在按住 ctrl 的情况下释放其它按键,才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为,请为 ctrl 换用 keyCode:keyup.17。

2..exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->

<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->

<button @click.ctrl.exact="onCtrlClick">A</button>

3.v-model语法糖

<input v-bind:value="msg" v-on:input="msg=$event.target.value">

4.v-model checkbox不同点:

        没有给checkbox设置value属性 =》勾选为true,取消勾选为false

        可以看到有了value属性,v-model 对应的msg 依然是true或false;

        我们来改一点代码,通常v-model对应的都是字符串,这次我们初始化为空数组[]

        <input type="checkbox" id="vue" value="vue" v-model="msg">

        data(){

            return {

                    msg:[]

            }

        }

        结果:['vue','angular'],当是数组时,就不会显示true或false了

5.v-model radio的值为value

6.v-model selected值为option的<option value="abc"></option>   value值abc

7.  lazy修饰符(失去焦点时才输入框和数据进行同步)

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步:

8.number修饰符(可以输入字符,但获取到的值自动过滤字符,只获取数字)

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:

9.trim

如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 3,540评论 0 25
  • 一. Vue 实例 以后你可以在 API 参考中查阅到完整的实例属性和方法的列表。 实例生命周期钩子 比如 cre...
    兔子___阅读 389评论 0 0
  • 事件处理 监听事件 可以用v-on指令监听DOM事件,并在触发时运行一些JavaScript代码。 事件处理方法 ...
    oWSQo阅读 966评论 0 1
  • 序言:乱七八糟一锅粥! 基于Vue.js 教程、介绍— Vue.js 心得: 在vue中,推荐始终使用 kebab...
    苦苦修行阅读 697评论 0 1
  • 作者:涯十 新浪微博:Mitty-Z “花果山的晚霞比一切都美”随着花果山美景的渐进,这个又一部关于大圣的电影,剧...
    MittyZ阅读 622评论 0 1

友情链接更多精彩内容