<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">
配合文字框一起使用的按鍵修飾符