vue指令之表单控件绑定v-model v-model与v-bind结合使用


Posted in Javascript onApril 17, 2019

一、表单控件绑定v-model

v-model 双向数据绑定;一般用于表单元素,会忽略表单元素的value、checked、selected的初始值,且将Vue实例的数据作为数据来源。

① 单行文本框 input[type="text"] 、多行文本框 textarea:

  v-model值绑定到value属性;

<body>
  <div id="app">
   <input type="text" v-model="username" value="我是初始值,但是我被忽略了"><br/>
   <textarea v-model="schoolname" value="我是初始学校:北大青鸟"></textarea><br/>
  </div>
  <script src="./vue.js"></script>
  <script>
   var vm = new Vue({
     el:'#app',
     data:{
      username:'小鸣',
      schoolname:'XX科技大学'
     }
   })
  </script>
</body>

ps:下面看下Vue v-bind v-model的使用

v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据

最基础的就是实现一个联动的效果

<body>
  <div class="app">
    <span>Multiline message is:</span>
    <p>{{message}}</p>
    <br>
    <textarea name="" v-model="message" placeholder="please write..."></textarea>
  </div>

</body>
<script>
  new Vue({
     el:'.app'
  })
</script>

checkbox

<body>
  <div class="app">
    <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
    <label for="jack">jack</label>
    <input type="checkbox" id="John" value="John" v-model="checkedNames">
    <label for="jack">John</label>
    <input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
    <label for="jack">Mike</label>
    <br>
    <span>Checked names:{{checkedNames}}</span>
  </div>
  
</body>
<script>
  new Vue({
     el:'.app',
     data:{
       checkedNames:[]
     }
  })
</script>

v-bind

有些指令可以在其名称后面带一个“参数” (Argument),中间放一个冒号隔开。例如,v-bind 指令用于响应地更新 HTML 特性

总结

以上所述是小编给大家介绍的vue指令之表单控件绑定v-model v-model与v-bind结合使用 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
javascript 动态添加事件代码
Nov 30 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
对xmlHttp对象的理解
Jan 17 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
对angularJs中2种自定义服务的实例讲解
Sep 30 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 #Javascript
详解js获取video任意时间的画面截图
Apr 17 #Javascript
解决vue跨域axios异步通信问题
Apr 17 #Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 #Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 #Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 #Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 #Javascript
You might like
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
PHP数组实例总结与说明
2011/08/23 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
PHP实现的汉字拼音转换和公历农历转换类及使用示例
2014/07/01 PHP
php实现可运算的验证码
2015/11/10 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
Yii2单元测试用法示例
2016/11/12 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
2014/06/06 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
js仿小米手机上下滑动效果
2017/02/05 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
详解Python中的文件操作
2016/08/28 Python
Django URL传递参数的方法总结
2016/08/28 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
python如何统计序列中元素
2020/07/31 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
Python 3 判断2个字典相同
2019/08/06 Python
python else语句在循环中的运用详解
2020/07/06 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
web页面录屏实现
2019/02/12 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
工商学院毕业生自荐信
2013/11/12 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技