vue单向绑定和双向绑定

一、单向绑定就是：修改视图，数据不变；修改数据（app.name="1234"），视图会变

二、双向绑定：修改视图，数据会变；修改数据，视图会变

demo：


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model表单数据双向绑定title>
head>
<body>
    
    <div id="app">
        <input :value="name">
        <span>{{name}}span>
        <br>
         
        <input :value="name" @input="output">
        
        
        
        <span>{{name}}span>
        <br>
        
        <input v-model="name">
        <span>v-model:{{name}}span>
 
    div>
   
    
    <script src="./node_modules/vue/dist/vue.global.js">script>
    <script type="text/javascript">
        const {createApp} = Vue;
        const app = createApp({
            data(){
                return {
                    name:"测试"
                }
            },
            methods:{
                output(event){
                    console.log("输入的值为：",event.target.value);
                    this.name=event.target.value;//将输入框的值赋值给视图。
                }
            }
        }).mount("#app");
        console.log("app:",app);
    script>
body>
html>

相关阅读:
如何建立自己的简易httpserver服务器
get_started_3dsctf_2016【BUUCTF】(两种解法)
智工教育：公务员网上报名确认事项与流程的状态标识
电影主题HTM5网页设计作业成品——爱影评在线电影(10页面)使用dreamweaver制作采用DIV+CSS进行布局
前端实战｜React18极客园——发布文章模块（切换单/三/无图、暂存图片列表）
【从零开始学zabbix】一丶Zabbix的介绍与部署Zabbix
VUE+Spring Boot前后端分离开发实战(三)：基于vue+spirngboot实现后台通用管理系统框架
使用ApiFox衔接前后端开发人员，提升沟通效率实践
创建第一个Springboot 项目
【Leetcode】2422. Merge Operations to Turn Array Into a Palindrome

原文地址：https://blog.csdn.net/QWERTY55555/article/details/133913128