123. Python语言 的 项目前导(下) 之 Vue 第四章 ：Vue 的 表单输入绑定

本章主题

  

关键词

  

表单输入绑定

  v-model 指定可以实现 表单值 与 属性 的 双向绑定。即表单元素中更改了值，相对应的属性中的值也会随之 自动的更新；属性中的值更新了，相对应的表单中的值也会随之 自动的更新。

  绑定的属性和事件：
    v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

    1. text 和 textarea 元素使用 value 属性 和 input 事件。
    2. checkbox 和 radio 使用 checked 属性和 change 事件。
    3. select 字段将 value 作为 prop 并将 change 作为事件。

  

表单元素绑定

   input 绑定

# v-model是v-model:value的缩写,改变 input标签中的值 可以改变下面的属性

<input v-model="message" placeholder="请输入...">
<input v-model:value="message" placeholder="请输入...">
<p>输入的内容是：{
   {
    message }}</p>


new Vue({
   
  el: '#example-3',
  data: {
   
    message: ""
  }
})

   textarea 绑定

<span>输入的内容是：</span>
<p style="white-space: pre-line;">{
   {
    message }}</p>