<template> <div v-click v-text="msg" v-html="msg" :class="['box1',flag ? 'box2': '']">{{msg}}</div> <p @click="Func(arg)" v-bind:title="titleStr"></p> <input type="text" v-mofel="msg"> <li v-for="(item,index) in arr">{{item}}</li> <li v-for="(item,index) in list" :key="index"> 索引:{{index}}--编号:{{item.id}}--姓名:{{item.name}}--性别:{{item.gender}} </li> <h3 v-if="flag">v-if控制的元素</h3> <!-- v-if比较消耗性能-节点 --> <h3 v-show="flag">v-show控制的元素</h3> <!-- v-show不较好-节点的显示和隐藏 --> </template>
事件修饰符
-
.prevent
-
.once
只触发1次 -
.stop
阻止冒泡 -
.self
只有在当前元素上触发事件的时候,才会调用处理函数
<a href="http://www.baidu.com" @click.prevent.once="show">超链接</a> <button @click.once="say">按钮</button>
按键修饰符都是配合文本输入框使用的;
-
.enter
-
.tab
-
.esc
-
案例需求:用户输入密码之后,按
enter
键登录
<input type="text" v-model="pwd" @keyup.f1="up">
配合文本框一起使用的按键修饰符