0
点赞
收藏
分享

微信扫一扫

【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue语法基础：表单中双向绑定指令的使用

mafa1993 2023-02-23 阅读 86
vuejshtmlVue双向绑定Python后端开发


文章目录

  • ​​9、表单中双向绑定指令的使用​​
  • ​​input双向绑定写法​​
  • ​​运行结果​​
  • ​​textarea双向绑定写法​​
  • ​​运行结果​​
  • ​​checkbox单选写法​​
  • ​​运行结果​​
  • ​​checkbox多选写法​​
  • ​​运行结果​​
  • ​​radio单选写法​​
  • ​​运行结果​​
  • ​​select单选写法​​
  • ​​运行结果​​
  • ​​select多选写法​​
  • ​​运行结果​​
  • ​​使用v-for改写select多选写法​​
  • ​​运行结果​​
  • ​​自定义checkbox选择显示内容​​
  • ​​运行结果​​
  • ​​懒加载修饰符lazy​​
  • ​​运行结果​​
  • ​​数字修饰符number​​
  • ​​运行结果​​
  • ​​去前后空格修饰符trim​​
  • ​​运行结果​​

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

input双向绑定写法

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

<!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="https://unpkg.com/vue@next"></script>
</head>

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

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

  const vm = app.mount('#root');
</script>

</html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue语法基础：表单中双向绑定指令的使用_vue

textarea双向绑定写法

<!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="https://unpkg.com/vue@next"></script>
</head>

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

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

  const vm = app.mount('#root');
</script>

</html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue语法基础：表单中双向绑定指令的使用_双向绑定_02

checkbox单选写法

<!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="https://unpkg.com/vue@next"></script>
</head>

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

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

  const vm = app.mount('#root');
</script>

</html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue语法基础：表单中双向绑定指令的使用_双向绑定_03

checkbox多选写法

<!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="https://unpkg.com/vue@next"></script>
</head>

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

<script>
  const app = Vue.createApp({
    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>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue语法基础：表单中双向绑定指令的使用_双向绑定_04

radio单选写法

<!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="https://unpkg.com/vue@next"></script>
</head>

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

<script>
  const app = Vue.createApp({
    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>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue语法基础：表单中双向绑定指令的使用_双向绑定_05

select单选写法

<!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="https://unpkg.com/vue@next"></script>
</head>

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

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

  const vm = app.mount('#root');
</script>

</html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue语法基础：表单中双向绑定指令的使用_js_06

select多选写法

<!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="https://unpkg.com/vue@next"></script>
</head>

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

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

  const vm = app.mount('#root');
</script>

</html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue语法基础：表单中双向绑定指令的使用_vue_07

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

<!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="https://unpkg.com/vue@next"></script>
</head>

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

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

  const vm = app.mount('#root');
</script>

</html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue语法基础：表单中双向绑定指令的使用_js_08

自定义checkbox选择显示内容

<!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="https://unpkg.com/vue@next"></script>
</head>

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

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

  const vm = app.mount('#root');
</script>

</html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue语法基础：表单中双向绑定指令的使用_vue_09

懒加载修饰符lazy

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

<!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="https://unpkg.com/vue@next"></script>
</head>

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

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

  const vm = app.mount('#root');
</script>

</html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue语法基础：表单中双向绑定指令的使用_js_10

数字修饰符number

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

<!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="https://unpkg.com/vue@next"></script>
</head>

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

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'hello world'
      }
    },
    template: `
        <div>
          {{ typeof message }}
          <br/>
          <input v-model.number="message" type="number" />
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue语法基础：表单中双向绑定指令的使用_js_11

去前后空格修饰符trim

<!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="https://unpkg.com/vue@next"></script>
</head>

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

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

  const vm = app.mount('#root');
</script>

</html>

运行结果

【Vue3 从入门到实战 进阶式掌握完整知识体系】009-Vue语法基础：表单中双向绑定指令的使用_html_12


举报

相关推荐

Vue3 系统入门与项目实战 进阶式掌握完整知识体系【完结】

项目实战组件化基础概念Vue.js前端开发

【Vue3 从入门到实战 进阶式掌握完整知识体系】004-Vue语法基础：数据、方法、计算属性、侦听器

vuejsjavascripthtmlVuePython后端开发

Vue3 京东到家项目实战第二篇（商家详情页面及购物车完整逻辑开发） 进阶式掌握vue3完整知识体系

vue.jsjavascript前端

【vue3】关于vue3中的数据双向绑定

unity动画游戏引擎

Vue3 - 表单的输入与绑定

输入框表单Vue软件测试

vue的基础语法（一）数据指令绑定

vue.js前端javascript

【vue3】13-前端路由-Vue-Router的详解: 从入门到掌握

linux运维服务器

vue快速入门（二十）双向绑定在表单选项的使用

vue.jsjavascript

vue双向数据绑定原理（vue2和vue3的区别）

vue.jsjavascript前端

vue3 从入门到放弃之【 ref 】

vue.js
0 条评论