vue.js input框之间赋值方法

时间：2018-08-30 编辑：猪哥来源：一聚教程网

如下所示：

demo.html



 

 
 Index Page

 

 
 
 测试
 

 {{ result1 }}
 

 
 
 测试
 

 {{ result2 }}

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



 

 
 Index Page

 

 
 
 测试
 

 {{ result1 }}
 

 
 
 测试
 

 {{ result2 }}

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

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

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

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

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

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

传送门：v-bind官方说明

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

上一个： Vue.js获取被选择的option的value和text值方法
下一个： vuejs 动态添加input框的实例讲解

推荐专题

最新下载

热门教程

vue.js input框之间赋值方法

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程