初学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>
``