vue.js input框之间赋值方法

更新时间：2018年08月24日 09:27:30 作者：疯狂的妖妖

今天小编就为大家分享一篇vue.js input框之间赋值方法具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

如下所示：

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框之间赋值方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

VUE中如何优雅实现爷孙组件的数据通信
所谓祖孙组件,也就是3层嵌套的组件,下面这篇文章主要给大家介绍了关于VUE中如何优雅实现爷孙组件的数据通信的相关资料,需要的朋友可以参考下
2022-04-04
vue打印浏览器页面功能的两种实现方法
这篇文章主要给大家介绍了关于vue打印浏览器页面功能的两种实现方法,这个功能其实也是自己学习到的,做完也有一段时间了,一直想记录总结一下,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-04-04
Vue父子组建的简单通信之控制开关Switch的实现
这篇文章主要介绍了Vue父子组建的简单通信之控制开关Switch的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
vue.js实现含搜索的多种复选框（附源码）
这篇文章主要给大家介绍了利用vue.js实现含搜索的多种复选框的相关资料，文中给出了简单的介绍，但提供了完整的实例源码供大家下载学习，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-03-03
Vue3开发右键菜单的示例详解
右键菜单在项目开发中是属于比较高频的组件了,所以这篇文章小编主要来和大家介绍一下如何利用vue3开发一个右键菜单,有需要的可以参考下
2024-03-03
Vue errorHandler异常捕获
这篇文章主要介绍了Vue errorHandler异常捕获,需要的朋友可以参考下
2023-10-10
图文讲解vue的v-if使用方法
在本篇文章里我们给大家分享了关于vue的v-if使用方法的相关知识点，有兴趣的朋友们跟着学习下。
2019-02-02
详解通过JSON数据使用VUE.JS
本篇文章主要介绍了详解通过JSON数据使用VUE.JS，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
mpvue+vant app搭建微信小程序的方法步骤
这篇文章主要介绍了mpvue+vant app搭建微信小程序的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
详解项目升级到vue-cli3的正确姿势
这篇文章主要介绍了详解项目升级到vue-cli3的正确姿势，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01