vue.jsinput框之间赋值⽅法
如下所⽰：
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="cdn.bootcss/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 () {
},
test2: function () {
}
}
})
demo.html
<!DOCTYPE html>
<html>
<head>
input框禁止输入
<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="cdn.bootcss/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来赋值，测了下，input 输⼊框的 value 和 placeholder 是可以使⽤双⼤括号法的。但是为了避免异议，还是遵循官⽅⽂档给的要求，给属性赋值时⽤v-bind吧。
以上这篇vue.js input框之间赋值⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。