用v-model实现基本的vue评论框

v-model双向绑定原理前一个绑定后一个的值也会同时换绑下面是我用v-model实现的一个基本案例

<template>
	<view class="" >
<input type="text" value="" v-model="ww" @keydown.enter="w()"/>
<view class="" v-for="(item,index) in info">
	<h1>{{item.name}}</h1>
	<h1>{{item.age}}</h1>
	<h1>{{item.id}}</h1>
</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				ww:"",
				// www:true,
				// www:true
				info:[{
					id:1,
					name:"嗡嗡嗡",
					age:"17"
				}]
			}
		},
		methods: {
w(){
	//this是指调用者本身；
//this指针永远只想调用者本身；
	// this.ww=""
	console.log(this.ww)
	//event.target 可以理解为返回事件本身
	//event,target.value 获取value值也可以直接用这个方法进行push
	//event.target 
	if(!event.target.value.trim()){
		return alert("请输入合法值！")
	}
	let dd={
		id:Math.floor(Math.random()*100),
		name:this.ww,
		age:Math.floor(Math.random()*10) 
	}
	this.info.push(dd)
	this.ww=""
}    
		}
	}
</script>

<style>
	input{
		width: 300rpx;
		height: 200rpx;
		border: 1px solid #000000;
	}
</style>

样式有点丑别介意主要是实现功能

v-model也是写一个自定义值然后在数组定义为空在通过push或者unshift进行插入数据