利用Vue v-model实现一个自定义的表单组件


Posted in Javascript onApril 27, 2017

功能描述:

通过点击按钮,可以增减购物数量

组件名称是 CouterBtn

最终效果如下

利用Vue v-model实现一个自定义的表单组件

我们使用 vue-cli搭建基本的开发环境,这也是最快的进行 .vue组件开发的方式

对于入口组件  App.vue (可以暂时忽略其他细节,我们的重点是如何写组件)

App.vue

<template>
 <div id="app">
 <h4>这是一个利用 v-model实现的自定义的表单组件</h4>
 <h6>CouterBtn组件的值 <i> {{ btnValue }} </i></h6>
 5. <counter-btn v-model="btnValue"></counter-btn>
 <form class="" action="/add" method="post">
  <!-- 真实情况请将 type改为hidden -->
  <label for="count">值绑定到 input 隐藏域里</label>
  <input type="text" name="count" :value="btnValue.res" id="count">
10. </form>
 </div>
 </template>
 <script>
 import CounterBtn from './components/CouterBtn.vue'
15. export default {
 data() {
  return {
  btnValue: {}
  }
20. },
 components: {
  CounterBtn
 }
 }
25. </script>
 <style lang="stylus">
 h6 i
 border 1px dotted
 form
30. margin-top 20px
 padding 20px
 border 1px dotted #ccc
 label
  vertical-align: middle
35. </style>

下面我来对 App.vue中的一些代码进行一些说明,根据代码行数来说明

4 : 我们使用 {{ btnValue }}来获取自定义组件 counter-btn的值, 这里仅仅是展示效果用 

5: 我们使用了counter-btn ,自定义的组件 

9: 我们将自定义组件的值,绑定到我们的表单组件 input中去, 在真实的情况下, 此 input的类型可能为 hidden类型 

21: 由于我们需要在App.vue组件中使用我们自定义的组件 counter-btn,所以需要使用 components注册组件, 这里还使用了 ES6的对象解构 

26: 我们使用CSS预处理器为stylus, 前提是你的 node_modules中要安装此npm包和loader,vue-cli已经帮我们处理好了stylus的编译; 根据个人情况选择 

我们自己设计的组件通过 v-model,把组件内部的值传给了它所绑定的值

下面我们来看看我们的组件的实现

CounterBtn.vue

<template>
 <div class="coutter-wrapper">
 <button type="button" @click="plus">+</button>
 <button type="button">{{ result }}</button>
5. <button type="button" @click="minus">-</button>
 </div>
 </template>
 <script>
 export default {
10. methods: {
 minus() {
 this.result--;
 this.$emit('input', {res: this.result, other: '--'})
 },
15. plus() {
 this.result++;
 this.$emit('input', {res: this.result, other: '++'})
 }
 },
20. data() {
 return {
 result: 0,
 }
 }
25. }
 </script>
 <style lang="stylus" scoped>
 button
 border 0
30. outline 0
 border-radius 3px
 button:nth-child(2)
 width 200px 
 </style>

我们可以看到组件的实现非常简单, 3个button搞定; 这里最关键的代码是

this.$emit('input', {res: this.result, other: '++'})

通过 触发 input事件和自定的数据来实现把数据暴露给 v-model绑定的属性值

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木

Javascript 相关文章推荐
javascript Zifa FormValid 0.1表单验证 代码打包下载
Jun 08 Javascript
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
javascript删除option选项的多种方法总结
Nov 22 Javascript
Treegrid的动态加载实例代码
Apr 29 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 Javascript
JavaScript函数表达式详解及实例
May 05 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
基于node.js实现微信支付退款功能
Dec 19 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 #Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 #Javascript
微信小程序 request接口的封装实例代码
Apr 26 #Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 #Javascript
微信小程序 flex实现导航实例详解
Apr 26 #Javascript
微信扫码支付零云插件版实例详解
Apr 26 #Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 #Javascript
You might like
一个PHP日历程序
2006/12/06 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
php中使用Imagick实现图像直方图的实现代码
2011/08/30 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
PHP创建XML接口示例
2019/07/04 PHP
关于laravel 子查询 &amp; join的使用
2019/10/16 PHP
javascript+mapbar实现地图定位
2010/04/09 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
JS、DOM和JQuery之间的关系示例分析
2014/04/09 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
js格式化时间的方法
2015/12/18 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
node.js的Express服务器基本使用教程
2019/01/09 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
解密Python中的描述符(descriptor)
2015/06/03 Python
Python的Django框架中的Context使用
2015/07/15 Python
python生成验证码图片代码分享
2016/01/28 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
Shell编程面试题
2012/05/30 面试题
卫生巾广告词
2014/03/18 职场文书
社区娱乐活动方案
2014/08/21 职场文书
政工例会汇报材料
2014/08/26 职场文书
工作收入证明模板
2015/06/12 职场文书
教师继续教育反思周记
2015/06/25 职场文书
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
python 命令行传参方法总结
2021/05/25 Python
sass 常用备忘案例详解
2021/09/15 HTML / CSS
使用scrapy实现增量式爬取方式
2022/06/21 Python