v-model双向数据绑定

Vue3

const state = reactive({
    showPay:false,
}) 
<van-popup
     v-model:show="showPay"
     :style="{ height: '40%' }"
     @close="close"
>
 </van-popup>

const handleCreateOrder = () => {
    state.showPay = true;
}

return {
   ...toRefs(state),
}

Vue2.x

<!-- 这里是模板开始 V-->
	<div id="app">
	<!-- 在元素上写v-model 再写value无效 -->
		<input type="text" v-model="message">
        <input type="text" v-model="text.data">
		<input type="checkbox" v-model="checked">
		<p>{{message}}</p>
	</div>
	<!-- 这里是模板结束 V-->
	<script type="text/javascript">
	/*
    语法：v-model="data里的属性" 只能放在有交互性的表单元素身上 例如：        
    input\text\checkbox\radio\textarea\select 否则无效

	双向绑定:vue将数据对象和Dom进行绑定，彼此之间互相产生影响
    在元素上写v-model和value 不能共存在一个标签内部 会无效
	数据到页面
	页面到数据  
	v-model (哪里双向绑定写在哪里忽略初始值)
	在表单元素上创建双向数据绑定
	会根据控件类型自动选取正确的方法来更新元素交互的值
	负责监听用户的输入事件以更新数据
	MVVM模式：
	M：Model 数据
	V：view 视图
	vm:view-Model 视图模型

	*/
		var message = 'hello du';//这里是数据M
		//这里是VM开始
		var vm = new Vue({
			el:'#app',
			data:{
				message,//message:message
                text:{
                    data                
                }
				checked:true,
			},
			methods:{//定义方法 方法中的this都指向实例
			}
		}) //这里是VM结束

    // 一般下面都是用this.操作的数据.方法
    methods:{ this.shuju.chuli}
    computed:{ this.shuju.chuli}
	</script>
</body>