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 相关文章推荐
新鲜出炉的js tips提示效果
Apr 03 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
超全面的JavaScript开发规范(推荐)
Jan 21 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
浅谈gulp创建完整的项目流程
Dec 20 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
Vue插槽原理与用法详解
Mar 05 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
js在HTML的三种引用方式详解
Aug 29 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和ACCESS写聊天室(八)
2006/10/09 PHP
使用php4加速网络传输
2006/10/09 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
jQuery图片轮播滚动切换代码分享
2020/04/20 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
Vue请求java服务端并返回数据代码实例
2019/11/28 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
解决Python pandas plot输出图形中显示中文乱码问题
2018/12/12 Python
python+opencv实现阈值分割
2018/12/26 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
django连接oracle时setting 配置方法
2019/08/29 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
利用python生成照片墙的示例代码
2020/04/09 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
Python实现画图软件功能方法详解
2020/07/28 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
python中round函数保留两位小数的方法
2020/12/04 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
优质服务活动实施方案
2014/05/02 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
2015年财务个人工作总结范文
2015/05/22 职场文书
三好学生主要事迹材料
2015/11/03 职场文书
react国际化react-intl的使用
2021/05/06 Javascript