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>

相关阅读:
区块链国际会议汇总
想要进入IB国际学校，这些证书你要知道
新来的00后真是卷王，工作没2年，跳槽到我们公司起薪18K
Zookeeper 中的 CAP
对比网络层后意识层自回归解码有意识的神经网络
【操作系统】十分钟了解关于TCP/IP网络的基础知识（一）CSMA/CD、MAC、IP以及子网掩码
HTTP请求头中Referer的作用
MySQL——命令行客户端的字符集问题
拷贝构造函数vs移动构造函数
Python和Nose实现移动应用的自动化测试

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