利用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 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
jquery tab标签页的制作
May 10 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
用vue设计一个日历表
Dec 03 Vue.js
微信小程序自定义modal弹窗组件的方法详解
Dec 20 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
解析php dirname()与__FILE__常量的应用
2013/06/24 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
PHP whois查询类定义与用法示例
2019/04/03 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
JavaScript和CSS通过expression实现Table居中显示
2013/06/28 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
2017/07/18 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
Python三元运算实现方法
2015/01/12 Python
Python实现豆瓣图片下载的方法
2015/05/25 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
详解Python之unittest单元测试代码
2018/01/24 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
Python GUI编程完整示例
2019/04/04 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
英文自荐信格式
2013/11/28 职场文书
离婚协议书标准格式
2014/10/04 职场文书
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS