【Vue 从入门到实战进阶式掌握完整知识体系】009

2025-07-27 20:27:16

【Vue 从入门到实战进阶式掌握完整知识体系】009 9、表单中双向绑定指令的使用input双向绑定写法双向绑定：你变我也变，我变你也变，时时刻刻一起变！代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu

【Vue 从入门到实战进阶式掌握完整知识体系】009

9、表单中双向绑定指令的使用

input双向绑定写法

双向绑定：你变我也变，我变你也变，时时刻刻一起变！

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: 'Hello World'
      }
    },
    // input 使用 v-model 就不需要使用 value 了
    template: `
        <div>
          {{ message }}
          <br/>
          <input v-model="message" />
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061092121068.png

textarea双向绑定写法

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: 'Hello World'
      }
    },
    // textarea 直接如下所写即可，剩下的交给 vue
    template: `
        <div>
          {{ message }}
          <br/>
          <textarea v-model="message" />
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061092717959.png

checkbox单选写法

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: false
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <input type="checkbox" v-model="message" />
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061091104.png

checkbox多选写法

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: []
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          大哥刘备<input type="checkbox" v-model="message" value="大哥刘备" /><br/>
          二哥关羽<input type="checkbox" v-model="message" value="二哥关羽" /><br/>
          三哥张飞<input type="checkbox" v-model="message" value="三哥张飞" /><br/>
          四哥赵云<input type="checkbox" v-model="message" value="四哥赵云" /><br/>
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210610945271.png

radio单选写法

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: '未勾选任何大哥'
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          大哥刘备<input type="radio" v-model="message" value="大哥刘备" /><br/>
          二哥关羽<input type="radio" v-model="message" value="二哥关羽" /><br/>
          三哥张飞<input type="radio" v-model="message" value="三哥张飞" /><br/>
          四哥赵云<input type="radio" v-model="message" value="四哥赵云" /><br/>
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210610971017.png

select单选写法

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        // 建议给一个默认值，因为默认第一个是勾选上的
        message: '大哥刘备'
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <select v-model="message">
            <option>大哥刘备</option>
            <option>二哥关羽</option>
            <option>三哥张飞</option>
            <option>四哥赵云</option>
          </select>
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-202106109414122.png

select多选写法

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: []
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <select v-model="message" multiple>
            <option>大哥刘备</option>
            <option>二哥关羽</option>
            <option>三哥张飞</option>
            <option>四哥赵云</option>
          </select>
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061094448026.png

使用v-for改写select多选写法

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: [],
        opti: ["大哥刘备","二哥关羽","三哥张飞","四哥赵云"],
        // 对象数据写法，value 里面可以存储任意的内容
        opti2: [{
          text: '大哥刘备', value: '大哥刘备'
        },{
          text: '二哥关羽', value: '二哥关羽'
        },{
          text: '三哥张飞', value: '三哥张飞'
        },{
          text: '四哥赵云', value: '四哥赵云'
        }]
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <select v-model="message" multiple>
            <option v-for="item in opti">{{item}}</option>
          </select>
          <!--对象数组写法-->
          <select v-model="message" multiple>
            <option v-for="item in opti2" :value="item.value">{{}}</option>
          </select>
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061095415156.png

自定义checkbox选择显示内容

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        // 需求：在选中时显示“hello”，未选中显示“bye”
        message: 'bye'
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <input type="checkbox" v-model="message" true-value="hello" false-value="bye" />
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-202106110004291.png

懒加载修饰符lazy

输入框失去焦点时绑定生效

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: 'hello world'
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <input v-model.lazy="message" />
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-20210611005691.png

数字修饰符number

将输入框里面的内容转换为number再存入绑定的属性中

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: 'hello world'
      }
    },
    template: `
        <div>
          {{ typeof message }}
          <br/>
          <input ="message" type="number" />
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061100810478.png

去前后空格修饰符trim

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  ct app = ({
    data() {
      return {
        message: 'hello world'
      }
    },
    template: `
        <div>
          {{ message }}
          <br/>
          <input ="message" />
        </div>
    `
  });

  ct vm = ('#root');
</script>

</html>

运行结果

image-2021061101009905.png本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent 删除表单基础入门语法vue

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1200254.html

推荐阅读

留言与评论（共有 16 条评论）

本站网友昆明第一高楼	1分钟前发表
'大哥刘备' }
本站网友电脑散热器	30分钟前发表
'二哥关羽'
本站网友艾菲迪克是什么	6分钟前发表
initial-scale=1.0"> <title>hello vue</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ data() { return { message
本站网友湿湿的梦	0秒前发表
` <div> {{ message }} <br/> <textarea v-model="message" /> </div> ` }); ct vm = ('#root'); </script> </html>运行结果image-2021061092717959.pngcheckbox单选写法代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
本站网友中人网	8分钟前发表
initial-scale=1.0"> <title>hello vue</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ data() { return { message
本站网友名贵药材有哪些	14分钟前发表
【Vue 从入门到实战进阶式掌握完整知识体系】009 9
本站网友 private公司	29分钟前发表
` <div> {{ typeof message }} <br/> <input ="message" type="number" /> </div> ` }); ct vm = ('#root'); </script> </html>运行结果image-2021061100810478.png去前后空格修饰符trim代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
本站网友同花顺股票软件下载	27分钟前发表
initial-scale=1.0"> <title>hello vue</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ data() { return { message
本站网友微博二维码	27分钟前发表
value
本站网友西安画室	3分钟前发表
value
本站网友连州二手房	10分钟前发表
initial-scale=1.0"> <title>hello vue</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ data() { return { message
本站网友仙乐都	1分钟前发表
value="item.value">{{}}</option> </select> </div> ` }); ct vm = ('#root'); </script> </html>运行结果image-2021061095415156.png自定义checkbox选择显示内容代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
本站网友性生活的技巧	14分钟前发表
'二哥关羽'
本站网友中国tk	9分钟前发表
` <div> {{ message }} <br/> <input type="checkbox" v-model="message" true-value="hello" false-value="bye" /> </div> ` }); ct vm = ('#root'); </script> </html>运行结果image-202106110004291.png懒加载修饰符lazy 输入框失去焦点时绑定生效代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
本站网友 glasgow	20分钟前发表
'二哥关羽' }

【Vue 从入门到实战进阶式掌握完整知识体系】009