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 相关文章推荐
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
webstorm添加*.vue文件支持
May 08 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
微信小程序实现左右列表联动
May 19 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 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实现验证码功能
2006/10/09 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
javascript表单验证大全
2015/08/12 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
js实现分页功能
2017/05/24 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
Python探索之pLSA实现代码
2017/10/25 Python
对pandas的层次索引与取值的新方法详解
2018/11/06 Python
利用python实现AR教程
2019/11/20 Python
Django使用rest_framework写出API
2020/05/21 Python
艺术用品:Arteza
2018/11/25 全球购物
人力资源部经理的岗位职责
2014/03/04 职场文书
公司建议书怎么写
2014/05/15 职场文书
涨价通知
2015/04/23 职场文书
妇产科护理心得体会
2016/01/22 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
JavaScript实现复选框全选功能
2021/04/11 Javascript
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
Java 定时任务技术趋势简介
2022/05/04 Java/Android