vue.js input框之间赋值 vue.js input框之间赋值方法
疯狂的妖妖 人气:0如下所示:
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框之间赋值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
加载全部内容