Vue获取input的数据(ref/v-model)～VUE学习笔记

初学VUE之数据获取

最新推荐文章于 2024-01-30 15:12:32 发布

原创最新推荐文章于 2024-01-30 15:12:32 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue笔记专栏收录该内容

4 篇文章

订阅专栏

初学VUE，仅供参考，有不足之处还请指出，谢谢*

Vue通过ref获取input数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="textOl">
			<ol>
				<li v-for="message in todos">
					{{message.text}}
				</li>
			</ol>
			<input type="text" ref="textname">
			<button v-on:click="reverBut">添加项目</button>
		</div>
		<script type="text/javascript">
			var testol=new Vue({
				el:'#textOl',
				data:{
					todos:[
						{text:'HTML5'},
						{text:'CSS'},
						{text:'Vue'}
					]
				},
				methods:{
					reverBut:function(){
						this.todos.push({text:this.$refs.textname.value})
					}
				}
			})
		</script>
		
	</body>
</html>

注 input ref值

<input type="text" ref="textname" id="name">

获取

this.$refs.textname.value

和JQuery不同的是,JQury通常通过id获取对应节点获取值。
例：

$('name').val()

注意，一个是通过ref，一个是id

Vue通过v-model获取input数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="textOl">
			<ol>
				<li v-for="message in todos">
					{{message.text}}
				</li>
			</ol>
			<input type="text"  v-model="messages">
			<button v-on:click="reverBut">添加项目</button>
		</div>
		<script type="text/javascript">
			var testol=new Vue({
				el:'#textOl',
				data:{
					todos:[
						{text:'HTML5'},
						{text:'CSS'},
						{text:'Vue'}
					],
					messages:''
				},
				methods:{
					reverBut:function(){
						this.todos.push({text:this.messages})
					}
				}
			})
		</script>
		
	</body>
</html>
``