vue.js input框之间赋值方法


Posted in Javascript onAugust 24, 2018

如下所示:

demo.html

<!DOCTYPE html>
<html>
 
<head>
 <meta charset="utf-8">
 <title>Index Page</title>
</head>
 
<body>
 <form action="" id="demo">
 <input type="text" value="调试 vuejs 2.0" ref="input1">
 <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="test1">测试</a>
 <br>
 <span>{{ result1 }}</span>
 <br>
 
 <input type="text" v-model="input2">
 <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="test2">测试</a>
 <br>
 <span>{{ result2 }}</span>
 </form>
 
 <script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script>
 <script type="text/javascript" src="demo.js"></script>
</body>
 
</html>

demo.js

new Vue({
 el: "#demo",
 
 data: {
  result1: null,
  result2: null,
  input2: ""
 },
 
 
 
 methods: {
  test1: function () {
   this.result1 = this.$refs.input1.value + " 成功!";
  },
 
  test2: function () {
   this.result2 = this.input2 + " 成功!";
  }
 }
})

demo.html

<!DOCTYPE html>
<html>
 
<head>
 <meta charset="utf-8">
 <title>Index Page</title>
</head>
 
<body>
 <form action="" id="demo">
 <input type="text" value="调试 vuejs 2.0" ref="input1">
 <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="test1">测试</a>
 <br>
 <span>{{ result1 }}</span>
 <br>
 
 <input type="text" v-model="input2">
 <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="test2">测试</a>
 <br>
 <span>{{ result2 }}</span>
 </form>
 
 <script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script>
 <script type="text/javascript" src="demo.js"></script>
</body>
 
</html>

拓展知识:初试Vue之元素、属性赋值方法

我们在vue中数据赋值时,会很自然而然的想到用“Mustache” 双大括号插值法来赋值

在一个小案例中,比如给一个img标签附上链接  会很自然的想到

<img src={{img.path}} />

运行时会很自然的发现文件资源请求失败,究其因很简单,因为src是属性而不是值,故不可直接src={{ img.path }}

当然,Vue的 v-bind 已经为我们考虑完备了

官方文档对于v-bind的说明:动态地绑定一个或多个特性,或一个组件 prop 到表达式。在绑定 class 或 style 特性时,支持其它类型的值,如数组或对象。可以通过下面的教程链接查看详情。

传送门:v-bind官方说明

注意点:在普通文本可直接使用双大括号法赋值,但对于标签的属性最好还是用v-bind来赋值,测了下,input 输入框的 value 和 placeholder 是可以使用双大括号法的。但是为了避免异议,还是遵循官方文档给的要求,给属性赋值时用v-bind吧。

以上这篇vue.js input框之间赋值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 面向对象思想 附源码
Jul 07 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
Apr 10 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
JQuery选择器特辑 详细小结
May 14 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
jQuery获取cookie值及删除cookie用法实例
Apr 15 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
react build 后打包发布总结
Aug 24 #Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 #Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 #Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 #Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 #Javascript
浅谈ElementUI中switch回调函数change的参数问题
Aug 24 #Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 #Javascript
You might like
理解php Hash函数,增强密码安全
2011/02/25 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
解决vue数组中对象属性变化页面不渲染问题
2018/08/09 Javascript
JS 验证码功能的三种实现方式
2018/11/26 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
python中stdout输出不缓存的设置方法
2014/05/29 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
pycharm修改file type方式
2019/11/19 Python
python语言是免费还是收费的?
2020/06/15 Python
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
小学运动会表扬稿
2014/01/19 职场文书
车间核算员岗位职责
2014/07/01 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
老公出轨后的保证书
2015/05/08 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
学校食堂管理制度
2015/08/04 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
零基础学java之带参数以及返回值的方法
2022/04/10 Java/Android