vue事件处理和数据的双向绑定v-model

原创

已于 2023-06-23 17:07:40 修改 · 859 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2023-06-20 22:14:19 首次发布

1.事件处理

# 事件指令
   -click:点击事件

# input标签的事件
   -input：只要输入内容，就会触发
-change：只要输入框发生变化，就会触发 -------多选单选checkbox，用change

-blur：只要失去焦点，就会触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>input事件</h1>
    <input type="text" @input="handleInput" v-model="username"> --->{
  
  {username}}
    <h1>change事件</h1>
    <input type="text" @change="handleChange" v-model="username1"> --->{
  
  {username1}}
    <h1>blur事件</h1>
    <input type="text" @blur="handleBlur" v-model="username2"> --->{
  
  {username2}}

</div>
</body>


<sc