Vue3小案例—v-model 双向数据绑定实现动态列表增加和删除
v-model双向绑定的原理：
v-model 是Vue.js 提供的一个指令，用于实现双向数据绑定，它可以将表单元素的值与Vue实例的数据绑定在一起，当表单元素的值发生改变时，Vue实例的数据也会随之更新，反之亦然。
v-model 的原理实际上就是通过事件机制实现的。当一个表单元素（如input、textarea）的值发生变化时，它会触发一个change事件或input事件，Vue.js 会监听这些事件并更新数据。同时，当Vue实例的数据发生变化时，也会触发一个更新视图的事件，从而实现数据与视图的同步更新。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script src="vue.js"></script></head><body><div id="box"><!-- v-model双向绑定的指令，快速获取输入框的值 -->{{mytext}}<input type="text" v-model="mytext" /><button @click="handleAdd">add</button><ul><!-- 第二个参数为索引下标 --><li v-for="item,index in datalist">{{item}}<button @click="handleDel(index)">delete</button></li></ul><!-- 列表为空时 --><div v-show="datalist.length===0">暂无待办事项</div></div><script>var obj = {data() {return {mytext: "",datalist: ["11", "22", "33"],};},methods: {//增加列表内容handleAdd() {console.log("add", this.mytext);this.datalist.push(this.mytext);// 清空输入框this.mytext = "";},//删除列表内容handleDel(index) {console.log("del", index);this.datalist.splice(index, 1);},},};var app = Vue.createApp(obj).mount("#box");</script></body>
</html>注意： v-model 只能用于表单元素，如input、textarea、select 等，而不能用于自定义组件。