Vue 之单向数据绑定实现双向数据绑定效果

最新推荐文章于 2024-05-14 07:25:43 发布

weixin_45408068

最新推荐文章于 2024-05-14 07:25:43 发布

阅读量345

点赞数

文章标签：单向数据绑定实现双向数据绑定效果

本文链接：https://blog.csdn.net/weixin_45408068/article/details/97652114

版权

input 身上的事件（ focus 、 blur 、 change 、input）
事件有几种绑定形式
1. js中绑定
  var input = document.querySelector( ’ input ’ )
  input.oninput = function ( ) { }
  DOM2级事件事件监听
2. html结构中绑定
  function load ( ) { }
  vue中事件绑定形式选择2
事件包含哪几个部分？
事件源、事件类型、事件处理程序
vue中事件格式：（举例：）

 <div v-on:eventType = '事件处理程序'></div>

单向数据绑定实现双向数据绑定效果案例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> 指令 </title>
</head>
<body>
    <div id="app">
        <input type="text" :value="msg" v-on:input="change">
        <!-- 简写 -->
        <input type="text" :value="msg" @input="change">
    </div>
</body>
<script src="../../lib/vue.js"></script>
<script>
      new Vue({
        el: '#app', //  挂载
        data: {
          msg: '真的很帅'
        },
        methods: {
          //事件处理程序
          change: function (e) {
            this.msg = e.target.value
          }
        }
      })
</script>
</html>

weixin_45408068

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 之单向数据绑定实现双向数据绑定效果

input 身上的事件（ focus 、 blur 、 change 、input）事件有几种绑定形式js中绑定var input = document.querySelector( ’ input ’ )input.oninput = function ( ) { }DOM2级事件事件监听html结构中绑定function load ( ) { }vue中事件绑定形式...
复制链接

扫一扫