vue3中使用ref

页面元素上直接使用ref属性

        先在setup中定义一个变量test，变量通过ref绑定数据，返回一个变量的值

        接着，把这个变量的值ref绑定到元素上，这个时候我们可以通过test.value获取对应的元素

<template>
    <div>
        
        <input v-model="inp" type="text" @input="change" placeholder="请输入内容" />

    </div>
</template>

<script>
import { ref } from 'vue'
export default {
    setup() {
       
        const inp = ref('');

        const change = () => {
            console.log(inp.value); //获取文本框的对象的值
        };

       

        return { inp, change }
    }
}
</script>

打印出来的是我们输入框实时输入的值

<template>
  <div>
    <input type="text" ref="inp" @input="change" placeholder="输入内容"/>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  setup() {
    let inp = ref(null);

    const change = () => {
      console.log(inp.value); //获取文本框的对象的值
    };
    return { inp, change };
  },
};
</script>

使用ref绑定，打印输出的是标签