Vue.js事件处理详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_61479892/article/details/121799237

本文详细介绍了Vue.js中事件的处理，包括遮罩隐藏、预处理、一次性渲染、双向数据绑定、输入框内容监听、键盘事件监听、watch监听器、单选框、下拉选框的动态变化以及多选框的使用技巧。

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

一、遮罩隐藏

点击隐藏后

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style></style>
</head>
<body>
  <div id="app">
    <!-- css 隐藏元素：通过 display: none; -->
    <p style="display: none;">这是一段消息</p>
    <!-- show：显示，出现 -->
    <p v-show="true">这是一段true消息</p>
    <p v-show="false">这是一段false消息</p>

    <p v-show="show">这是一段消息</p>
    <button @click="doShow">显示</button>
    <button @click="doHide">隐藏</button>
  </div>
  <script src="../vendor/vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      data:{
        show:true
      },
      methods:{
        doShow(){this.show=true},
        doHide(){this.show=false},
      },
    })
  </script>
</body>
</html>

二、pre

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- pre: 原样输出, 忽略 vue 关键词 -->
    <div id="app">
      <p v-pre>使用{
  
  {name}}可以输出vue中的name变量</p>
      <div>
        <!-- v-pre 专门针对 {
  
  {}} 语法, 让标签中的此语法不解析 -->
        <span v-pre>{
  
  {name}}</span>
        <span v-text="{
  
  {name}}"></span>
        <span>的值是{
  
  {name}}</span>
      </div>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
一一次性渲染
双双向向数数据据绑绑定定
      new Vue({
        el: "#app",
        data: { name: "Lucy" },
     })
    </script>
  </body>
</html>

三、一次性渲染

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  &