Vue.js框架--双向数据绑定,用ref获取dom节点（四）

曾经终败给现在 2024-02-18 23:24 40阅读 0赞

**主要操作技能：**

双向数据绑定 mvvm: model view view model

ref获得dom节点: ref="username" ==>显示数据this.$refs.username.value

**编写代码:**

<template>
    	<div id="app">
    		<h2>{
       {msg}}</h2><br />
    		<input type="text" v-model="msg">
    		<button @click="getMsg()">获得get表单的数据</button>
    		<button @click="setMsg()">设置set表单的数据</button><br /><br /><br />
    		
    		
    		<input type="text"  ref="username"/>
    		<button @click="getInput2()">获得getInput2表单的数据</button><br /><br /><br />
    		
    		<div ref="box">这是个box</div>
    		
    	</div>
    </template>
    /* 双向数据绑定
     * MVVM: model view view model
         vue 就是一个MVVM框架 
         
       model改变会影响试图view; 
       view 改变会影响模型model;
       
      注意：  双向数据必须在表单里使用哦！
     * 
     */
    <script>
    	export default {
    		name: 'app',
    		data() { //业务逻辑的数据
    			return {
    				msg: 'hello'
    			}
    		},
    		methods: {
    			getMsg() { //get
    				alert(this.msg);
    				},
    				setMsg() {//set
    				this.msg="我是改变后的数据哦！";
    			},
    			getInput2(){
    				//获取ref定义的dom节点
    				console.log(this.$refs.username);
    				
    				//获取ref定义的dom节点改变颜色
    				this.$refs.box.style.background="red";
    				
    				//获取文本username数据
    				alert(this.$refs.username.value);
    			}
    		}
    	}
    </script>

**效果：**

![70][]

![70 1][]

![70 2][]

![70 3][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1ea9ec6cde7e4b6f976d4111ab9e1323.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/28c073439e124415bcf6049287bc742d.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/4b1b49f968c042f1a1ac23b927c8c5e9.png
[70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/0bd946ee3fab4db084e1641e66384e8a.png