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框之间赋值方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vite vue使用cdn引入element-plus的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-04-04
基于element-ui封装可搜索的懒加载tree组件的实现
这篇文章主要介绍了基于element-ui封装可搜索的懒加载tree组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
vue项目无论是用element中的Select选择器,还是使用公司维护的组件,都可以轻松实现单选和多选的需求,这篇文章主要给大家介绍了关于Vant弹出列表多选输入框下拉选择的相关资料,需要的朋友可以参考下2024-01-01
vue3使用iframe嵌入ureport2设计器,解决预览时NullPointerException异常问题
这篇文章主要介绍了vue3使用iframe嵌入ureport2设计器,解决预览时NullPointerException异常问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
在vue的实际开发过程中,我们如何将以选中的值直接渲染到页面中,下面这篇文章主要给大家介绍了关于Vue3实现下拉选择框多选功能的相关资料,需要的朋友可以参考下2023-09-09
这篇文章主要给大家介绍了关于Vue.js源码分析之自定义指令的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要为大家介绍了vue2与vue3的生命周期对比，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了Vue移动端下拉加载更多数据onload实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要介绍了详解Vue2.0之去掉组件click事件的native修饰,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
本文中，我们主要介绍Cesium在Vue3运行环境的配置，及Cesium实例中控件的显隐设置，本项目基于pnpm安装，也可使用其他包管理器进行安装，如npm或yarn，本文通过示例代码对vue初始化Cesium地图相关知识介绍的非常详细，需要的朋友参考下吧2023-07-07
最新评论