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 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
webpack4的迁移的使用方法
May 25 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
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笔记 字符串处理
2010/10/19 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
前端必学之PHP语法基础
2016/01/01 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python+django实现文件上传
2016/01/17 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
Python运行DLL文件的方法
2020/01/17 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
不用游标的SQL语句有哪些
2012/09/07 面试题
服务员自我评价
2014/01/25 职场文书
业务员辞职信范文
2015/03/02 职场文书
出国导师推荐信
2015/03/25 职场文书
政审证明材料
2015/06/19 职场文书
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python