Vue.js（1）- 指令和修饰符

<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">
配合文本框一起使用的按键修饰符