Vue指令（4）：v-model

v-model

作用

给表单元素使用，实现双向数据绑定，可以快速获取和设置表单元素内容

使用场景分析

上图第一张图为视图，第二张图为数据。两者实现双向数据绑定

（1）数据变化时，视图自动更新

（2）视图变化时，数据自动更新

语法

v-model='变量'

<divclass="app"><!-- v-model让用户和视图实现双向数据绑定 （1）视图变化，数据变化 （2）数据变化，视图变化 可以快速的获取或设置表单元素的内容 -->账户：<inputtype="text"v-model="account"></input><br></br>密码：<inputtype="text"v-model="password"></input><br></br><button@click="login">登录</button><button@click="reset">重置</button></div>

new Vue({ el: '.app', data: { account: '', password: '' }, methods: { login() { console.log('登录') console.log(this.account, this.password) }, reset() { //进行数据清空操作 this.account = '' this.password = '' } } })

小黑记事本案例

实现功能

• 列表渲染
• 删除功能
• 添加功能
• 底部统计和清空

代码展示

<divclass="app"><!-- 页面头部部分 --><headerclass="header"><h1>小黑记事本</h1></header><!-- 页面主体部分 --><sectionclass="main"><divclass="input-container"><inputplaceholder="请输入内容"class="new-to"v-model="content"><buttonclass="add"@click="addTask">添加任务</button></div><divclass="list"><ul><liv-for="(item, index) in list":key="item.id"@click="toggleDeleteButton(index)":class="{'active': activeIndex === index }"><divclass="task-content"><spanclass="task">{{index+1}}.</span><label>{{item.content}}</label></div><buttonclass="remove"v-show="activeIndex === index"@click.stop="del(item.id)">删除</button></li></ul></div></section><!-- 页脚部分 --><footerclass="footer"><!-- 统计部分 --><buttonclass="count">合计：{{list.length}}</button><!-- 清空部分 --><buttonclass="clear"@click="clearList">清空任务</button></footer></div>

new Vue({ el: '.app', data: { content: '', list: [ {id: 1, content: '学习Vue知识点'}, {id: 2, content: '学习图解密码学chap3'}, {id: 3, content: '复习计组知识'}, ], activeIndex: null }, methods: { clearList() { this.list = [] this.activeIndex = null; // 清空后重置激活状态 }, addTask() { if (this.content.trim()) { this.list.unshift({ id: +new Date(), content: this.content }) this.content = '' } else { alert('请输入内容') } }, del(id) { this.list = this.list.filter(item => item.id !== id) this.activeIndex = null; // 删除后重置激活状态 }, toggleDeleteButton(index) { if (this.activeIndex === index) { this.activeIndex = null; // 如果点击的是当前激活项，则隐藏删除按钮 } else { this.activeIndex = index; // 否则显示该项目的删除按钮 } } } }) </script>

页面展示