Vue.js（1）- 指令和修饰符-优快云博客

本文深入探讨了Vue.js的模板语法，包括条件渲染、列表渲染、事件处理、表单输入绑定及组件化等核心概念。通过实例展示了如何使用v-if、v-show、v-for、v-on、v-model等指令来实现动态页面效果，并介绍了事件修饰符和按键修饰符的使用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>

   <div v-html="msg" :class="['box1',flag ? 'box2': '']">{{msg}}</div>

　　<div v-text="msg" :class="['box1',flag ? 'box2': '']">{{msg}}</div>

　　<p @click="Func(arg)" :title="titleStr"></p>

　　<input type="text" v-mofel="msg">

　　<li v-for="item 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>

事件修饰符

1.prevent 阻止默认行为

2.once 只触发1次

3.stop 阻止冒泡

4.self 只有在当前元素上触发事件的时候，才会调用处理函数

<a href="http://www.baidu.com" @click.prevent.once="show">超链接</a>

<button @click.once="say">按钮</button>

按键修饰符

按键修饰符都是配合文本输入框使用的；

1.enter

2.tab

3.esc

案例需求：用户输入密码之后，按 enter 键登录

 <input type="text" v-model="pwd" @keyup.enter="up"> // 配合文本框一起使用的按键修饰符

转载于:https://www.cnblogs.com/houfee/p/9894851.html