Vue inputのデータ取得(ref/v-model)～VUE学習ノート
2401 ワード
初学VUE、参考までに、不足点があれば指摘してください.ありがとうございます.
Vueはrefでinputデータを取得する
Vueはrefでinputデータを取得する
<script src="vue.js" type="text/javascript" charset="utf-8"/>
<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>
</code></pre>
<p> input ref </p>
<pre><code><input type="text" ref="textname" id="name"/>
</code></pre>
<p> </p>
<pre><code>this.$refs.textname.value
</code></pre>
<p> JQuery ,JQury id 。<br/> ：</p>
<pre><code>$('name').val()
</code></pre>
<p> ， ref， id</p>
<h5>Vue v-model input </h5>
<pre><code>
<meta charset="utf-8"/>
<title/>
<script src="vue.js" type="text/javascript" charset="utf-8"/>
<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>
``
</code></pre>
</div>
</div>
</div>
</div>