vue02-数据双向绑定

布满荆棘的人生 2022-05-09 23:56 270阅读 0赞

首先看下面代码：

<!DOCTYPE html>
    <html lang=en>
        <head>
            <meta charset="utf-8"/>
            <title>Hello world</title>
            <script src="vue.js"></script>
        </head>
        <body>
            <div id="app">
                    
                <input type="text" v-model="inputValue"/> 
                <button v-on:click="handleBtnClick">提交</button>
                <ul>
                    <li v-for="item in list">{
       {item}}</li>
                </ul>
            </div>
    
            <script>
                var app = new Vue({
                    el:'#app',
                    data:{
                        list:[],
                        inputValue:''
                    },
                    methods:{
                        handleBtnClick: function(){
                            this.list.push(this.inputValue);
                            this.inputValue='';
                        }
                    }
                })
            </script>
    
    
        </body>
    </html>

v-model: 在表单或者组件上创建双向绑定，这里绑定vue实例中的inputValue值。双向绑定的意思是指：vue实例中的inputValue值变化，页面上的值也会变化，页面上的值变化，vue实例中变量的值也会变化，也就是mvvm。

v-on: 绑定事件，这里绑定click事件，触发handleBtnClick这个方法

v-for:是循环，把list里面的值放到item中，然后再<li>标签中显示

页面显示效果如下，点击提交，元素会放到下面<ul>列表中

![70][]

[70]: /images/20220510/eb48fda894414c1abf583e1b7a16eb52.png

发表评论取消回复

表情：

评论列表（有 0 条评论，270人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue数据双向绑定

5.Vue数据双向绑定 5.1.什么是双向数据绑定 Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的

刺骨的言语ヽ痛彻心扉/ 2024年03月30日 09:50/ 0 赞/ 102 阅读

相关 Vue 数据双向绑定

1. 前言本小节我们将介绍 Vue 中数据的双向绑定指令 v-model。v-model 的学习相对简单我们可以用 v-model 指令在表单、及元素上创建

一时失言乱红尘/ 2024年03月27日 08:47/ 0 赞/ 127 阅读

相关 Vue双向数据绑定原理

Vue双向数据绑定原理前端面试必问的一道面试题 vue采用MVVM模式，数据劫持结合开发者-订阅者模式，通过Object.defineProperty()劫持各个属

淩亂°似流年/ 2022年12月18日 14:57/ 0 赞/ 160 阅读

相关 vue实现数据双向绑定

Vue.js 是采用 Object.defineProperty 的 getter 和 setter，并结合观察者模式来实现数据绑定的。　当把一个普通 Javascrip

分手后的思念是犯贱/ 2022年12月11日 03:12/ 0 赞/ 255 阅读

相关 Vue实战（02）：Vue的双向数据绑定

一、题目创建一个html文件，定义一个账号密码输入框，并将输入框输入的数据和vue实例中的数据进行双向绑定。二、实现代码如下 <!DOCTYPE h

秒速五厘米/ 2022年10月22日 07:52/ 0 赞/ 133 阅读

相关 vue02-数据双向绑定

首先看下面代码： <!DOCTYPE html> <html lang=en> <head> <meta charse

布满荆棘的人生/ 2022年05月09日 23:56/ 0 赞/ 271 阅读

相关 Vue.js 双向数据绑定

文章目录 Vue指令之\`v-model\`和\`双向数据绑定\` 简易计算器源代码 Vue指令之`v-model`和`双向

r囧r小猫/ 2022年03月18日 02:52/ 0 赞/ 349 阅读

相关 Vue 双向数据绑定原理

vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过`Object.defineProperty()`来劫持各个属性的`setter`，`getter`

曾经终败给现在/ 2022年03月11日 05:37/ 0 赞/ 342 阅读

相关 vue双向数据绑定原理

前言 > 这个解答可回答面试中 ① vue双向数据绑定原理和 ② vue响应原理问题基本原理 vue.js 是采用数据劫持结合发布者-订阅者模式的方

你的名字/ 2022年01月31日 16:59/ 0 赞/ 294 阅读

相关 vue双向数据绑定原理

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

拼搏现实的明天。/ 2021年07月26日 22:52/ 0 赞/ 552 阅读