vue3 基础-表单元素双向绑定

2022-08-31 00:33:57 阅读：193 来源： 互联网

标签：youge const app 绑定表单 vue3 input message

通常是在 form 表单相关的场景中会用到双向绑定相关, 核心是 v-model 的应用.

input 输入框

<!DOCTYPE html>
<html lang="en">
<head>
  <title>input</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          message: 'hello, youge'
        }
      },
      template: `
      <div>
        {{message}}
        <input v-model="message" />
      </div>
      `
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

这里双向绑定指的是, message 和 input 框的输入内容和数据是"互相绑定和同步的" 任何一个发生改变, 则另一个同样改变, 核心就是 v-model 的功效. 对于 input 来说, 这里就不用写 value 相关的了.

<div>
   {{message}}
   <input v-model="message" />
</div>

textarea 多行输入框

多行输入标签和 input 是一样的写法. 同原生不同在于, 就一个单标签的方式即可完成编写.

template: `
  <div>
    {{message}}
    <textarea v-model="message" />
  </div>
`

radio 单选框

单选框, 只能选中一个选项, 因此用字符串来存储数据是非常合适的.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>radio</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          message: ""
        }
      },
      template: `
      <div>
        {{message}}
        youge <input type="radio" v-model="message" value="youge" />
        youni <input type="radio" v-model="message" value="youni" />
        myson <input type="radio" v-model="message" value="myson" />
      </div>
      `
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

checkbox 多选框

复选框就稍微复杂一点, 需要 value 来做标记, 同时数据的存储可以通过数组.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>chexbox</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      data () {
        return {
          message: []
        }
      },
      template: `
      <div>
        {{message}}
        youge <input type="checkbox" v-model="message" value="youge" />
        youni <input type="checkbox" v-model="message" value="youni" />
        myson <input type="checkbox" v-model="message" value="myson" />
      </div>
      `
    })
  const vm = app.mount('#root')
  </script>
</body>
</html>

// 就勾选了 1, 3 然后数组显示了 1, 3
[ "myson", "youge" ]  youge  youni  myson

因此单选框 radio 和多选框 checkbox 的共性都是需要 value 属性来绑定数据, 差异在于数据的存储上, radio 用字符串存储, checkbox 用数组存储即可.

select 下拉框

下拉框其实也就分单选和多选, 用法和上面的标签是一致的, 先来看单选的情况.

标签：youge,const,app,绑定,表单,vue3,input,message
来源： https://www.cnblogs.com/chenjieyouge/p/16641452.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue3 基础-表单元素双向绑定