利用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 相关文章推荐
jQuery中height()方法用法实例
Dec 24 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
Sep 27 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 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/10/09 PHP
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
python 远程统计文件代码分享
2015/05/14 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
python and or用法详解
2019/06/26 Python
python爬虫中多线程的使用详解
2019/09/23 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
打造经典复古风格的品牌:Alice + Olivia(爱丽丝+奥利维亚)
2016/09/07 全球购物
俄罗斯苹果优质经销商商店:iPort
2020/05/27 全球购物
银行职业规划书范文
2013/12/28 职场文书
秋天的图画教学反思
2014/05/01 职场文书
英文演讲稿开场白
2014/08/25 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
收入证明申请书
2015/06/12 职场文书
音乐研修感悟
2015/11/18 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
《穷人》教学反思
2016/02/19 职场文书