VUE3开发-3、v-model数据双向绑定

糖朝

已于 2025-03-11 13:25:59 修改

阅读量86

点赞数 1

分类专栏： vue前端文章标签：前端算法 linux

于 2025-03-07 10:00:34 首次发布

本文链接：https://blog.youkuaiyun.com/huang4998802/article/details/146087721

版权

vue前端专栏收录该内容

10 篇文章

订阅专栏

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
                                                
    <input type="text" v-model="username">         //v-model 数据双向绑定
    <input type="text" v-model.lazy="pwd">        //失去焦点后，数据绑定
    <input type="text" v-model.number="pwd">      //不管type设置为什么类型，只能绑定数字类型
    <input type="text" v-model.trim="pwd">        //去掉首位空格
    <p>{{ username }}</p>
    <p>{{ pwd }}</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return {
      username:"",
      pwd:""
    }
  },
  methods:{

  },
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>