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

最新推荐文章于 2024-08-02 00:34:21 发布
最新推荐文章于 2024-08-02 00:34:21 发布
阅读量395 收藏
点赞数
分类专栏： Vue.js 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29689343/article/details/118118970
版权

文章目录

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>

运行结果

image-20210613092121068.png

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>

运行结果

image-20210613092717959.png

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>

运行结果

image-20210613093113304.png

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>

运行结果

image-20210613093453271.png

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>

运行结果

image-20210613093731017.png

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>

运行结果

image-20210613094141322.png

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>

运行结果

image-20210613094448026.png

使用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>

运行结果

image-20210613095415156.png

自定义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>

运行结果

image-20210613100042391.png

懒加载修饰符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>

运行结果

image-20210613100356913.png

数字修饰符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>

运行结果

image-20210613100810478.png

去前后空格修饰符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>

运行结果

image-20210613101009905.png

訾博ZiBo
关注
专栏目录
Vue3 从入门到实战 进阶式掌握完整知识体系-探索组件的理念：组件间双向绑定高级内容（005）
weixin_42066070的博客
12-01 943
组件间双向绑定高级内容 不能写多个v-model但是可以写多个带属性的v-model:XXX <!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-wid
vue3知识点2. 常用指令v-model :value v-if v-show v-for v-bind: :class :style v-on @
yangyangdt的博客
12-19 9289
vue3基础知识点2 前言： 上一章已经学会如何创建vue实例了，这一章是vue一些的基础知识点，包括模板语言，以及常见的一些命令。最底部有运行好的全部代码链接。
【Vue3 从入门到实战 进阶式掌握完整知识体系】007-Vue语法基础：列表循环渲染
訾博（ZiBo）的博客
06-20 520
文章目录7、列表循环渲染使用v-for渲染数组运行结果使用v-for渲染对象运行结果使用key优化性能运行结果控制数组给对象添加属性运行结果循环n次运行结果指定某元素不显示运行结果存在问题解决问题：使用template运行结果 7、列表循环渲染 使用v-for渲染数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com
Vue 3 入门教程：从基础知识到实战案例
最新发布
蜡笔小新星的博客
08-02 721
Vue.js 是一个渐进式的 JavaScript 框架，适用于构建用户界面。其核心概念包括组件、指令和响应式数据绑定。以上内容为 Vue 3 的基础知识和组件开发的入门教程。通过理解 HTML、CSS 和 JavaScript 的基本概念，再结合 Vue 3 的核心特性，你将能够构建出丰富的前端应用。在实现这些知识时，多进行实践和实验，将有助于你的成长和技术提升。
【Vue3 从入门到实战 进阶式掌握完整知识体系】001-Vue语法初探
訾博（ZiBo）的博客
06-17 793
文章目录一、Vue语法初探1、第一个Vue程序hello world 代码运行结果我们在模板里面写一个变量运行结果使用mounted函数运行结果这告诉我们什么？2、反转字符串代码运行结果3、显示与隐藏代码显示状态隐藏状态4、了解循环和双向绑定代码运行结果往列表里面添加新的数据运行结果来点更有意思的运行结果5、组件概念初探先了解一下v-bind指令运行结果关于组件运行结果让组件灵活起来运行结果 一、Vue语法初探 1、第一个Vue程序 hello world 代码 <!DOCTYPE html>
【Vue3 从入门到实战 进阶式掌握完整知识体系】005-Vue语法基础：样式绑定语法
訾博（ZiBo）的博客
06-19 356
文章目录5、样式绑定语法通过动态绑定 class 属性来控制样式的展示运行结果通过 class 对象来控制样式的展示运行结果通过 class 数组来控制样式的展示运行结果控制子组件样式的展示运行结果demo3问题解决运行结果动态绑定样式内容运行结果 5、样式绑定语法 通过动态绑定 class 属性来控制样式的展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me
【Vue3 从入门到实战 进阶式掌握完整知识体系】010-探索组件的理念：组件概述
訾博（ZiBo）的博客
06-22 265
文章目录三、探索组件的理念1、组件概述组件图解简单使用运行结果复用组件运行结果组件可嵌套使用运行结果全局组件局部组件运行结果 三、探索组件的理念 1、组件概述 组件图解 组件的概念非常常见，类似于模块的概念 简单使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed
vue自定v-model实现表单数据双向绑定问题
10-18
Vue.js 是一个流行的前端JavaScript框架，其核心特性之一就是数据双向绑定。在Vue中，`v-model`指令被广泛用于实现这一功能，特别是在处理表单输入时。它简化了开发者在视图层和数据模型之间的交互，使得数据的更新...
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
10-17
总结来说，v-model指令是Vue.js中实现表单数据双向绑定的强大工具，通过简单的语法即可实现数据的即时同步，提升了前端开发的效率和用户体验。对于希望深入学习Vue.js及其数据绑定机制的开发者来说，理解和掌握v-...
首个 Vue3.x教程_Vue3.x+Ts+Vuex+Antd Ui框架入门进阶视频教程(34讲)-大地老师
01-30
Vue3.x环境搭建、Vue/cli脚手架使用、Vite脚手架使用、Vue目录结构 核心文件分析、Vue模板语法、Vue事件、Vue表单、Vue双休数据绑定、Vue Dom操作以、JavaScript表达式 、条件判断、 计算属性、watch侦听器、Vue3...
Vue2+Vue3基础入门到实战项目（一）—— 课程学习笔记
upgrade_bro的博客
08-21 2467
2023新版Vue2+Vue3基础入门到实战项目。Vue快速上手！
03-Vuejs入门到高级项目实战教程v3.1.pdf
11-04
03-Vuejs入门到高级项目实战教程v3.1.pdf
Vue3 从入门到实战 进阶式掌握完整知识体系
m0_73617968的博客
09-07 873
了解的都知道，我这么不思进取的人怎么可能突发奇想的去了解一个工作中没用过的类，不出意外的，还是在今天做 LeetCode 347. 前 K 个高频元素题的时候，尝试了几次都不知道怎么做，看评论区发现这道题实际上应该是使用 优先级队列 来做，我才知道有优先级队列这么个东西。优先级队列，依旧是 顾名思义，优先级队列会自动按照元素的权值排列，也就是说，优先级队列其实有反 先进先出规则，但是其对外接口依旧是从队头取元素，队尾添加元素，再无其他存取方式，看起来就是一个队列。优先级队列其实是一个 披着队列外皮的堆。
【Vue3 从入门到实战 进阶式掌握完整知识体系】003-Vue语法基础：模板语法
訾博（ZiBo）的博客
06-17 523
文章目录3、常用模板语法官方文档简单插值语法运行结果插值语法内使用表达式运行结果插值语法中使用自定义函数运行结果使用v-html指令渲染html代码运行结果使用v-bind指令动态绑定属性值运行结果使用v-once指令使得插值内容不再改变运行结果使用v-if指令控制标签的加载与否show为true运行结果show为false运行结果使用v-on指令进行事件绑定运行结果简写运行结果动态绑定属性名运行结果动态绑定事件名运行结果阻止事件的默认行为运行结果 3、常用模板语法 官方文档 时间：2021年06月15日
【Vue3 从入门到实战 进阶式掌握完整知识体系】016-探索组件的理念：使用插槽和具名插槽解决组件内容传递问题
訾博（ZiBo）的博客
06-29 270
文章目录7、使用插槽和具名插槽解决组件内容传递问题通过插槽向子组件传标签运行结果除了标签还可以传递字符串、子组件运行结果一些说明slot插槽默认内容运行结果多个插槽运行结果插槽的简写运行结果作用域插槽运行结果作用域插槽解构写法运行结果 7、使用插槽和具名插槽解决组件内容传递问题 通过插槽向子组件传标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt
【Vue3 从入门到实战 进阶式掌握完整知识体系】004-Vue语法基础：数据、方法、计算属性、侦听器
訾博（ZiBo）的博客
06-19 194
文章目录4、数据、方法、计算属性、侦听器代码运行结果计算属性和方法的不同运行结果侦听器运行结果侦听器参数代码运行结果总结 4、数据、方法、计算属性、侦听器 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo
【Vue3 从入门到实战 进阶式掌握完整知识体系】008-Vue语法基础：事件绑定
訾博（ZiBo）的博客
06-20 259
文章目录8、事件绑定基本使用运行结果绑定事件为表达式运行结果默认的event参数运行结果传参数运行结果传参数且获取默认的event参数运行结果一个事件执行多个函数运行结果事件修饰符stop运行结果其他时间修饰符参考鼠标修饰符、按键修饰符、系统修饰符参考文档 8、事件绑定 基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-
【Vue3 从入门到实战 进阶式掌握完整知识体系】017-探索组件的理念：动态组件和异步组件
訾博（ZiBo）的博客
06-29 673
文章目录8、动态组件和异步组件动态组件运行结果内容缓存运行结果异步组件运行结果 8、动态组件和异步组件 动态组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
【Vue3 从入门到实战 进阶式掌握完整知识体系】021-Vue中的动画：组件和元素切换动画的实现
訾博（ZiBo）的博客
06-29 279
文章目录3、组件和元素切换动画的实现代码运行结果使得它们”出入有序“运行结果第一次渲染页面就有动画效果运行效果多个单组件动画切换运行结果 3、组件和元素切换动画的实现 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
Vue2.0实战入门：数据双向绑定解析
"Vue2.0实战教程，基础入门篇，数据双向绑定概念及HelloWorld示例" 在本文中，我们将深入探讨Vue2.0的基础知识，这是一个流行的前端JavaScript框架，以其高效的数据绑定和组件化特性著称。Vue2.0的引入是因为它在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值