如果我想達(dá)到按回車鍵也能達(dá)到提交的效果如何修改代碼？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>todolist</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
</script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputVlue" />
<button @click="handleSubmit">提交</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
</div>
<script type="text/javascript">
new Vue({
el:"#root",
data:{
inputVlue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputVlue);
this.inputVlue='';
}
}
})
</script>
</body>
</html>
2019-12-03
搞錯！不好意思樓上也是對的。
2019-12-03
樓上有誤，直接上圖，
<div?id="root"> <input?type="text"?id="inputValue"?v-model="inputValue"?@keyup.enter="handleClick"?/> <button?v-on:click="handleClick">點(diǎn)擊我</button> <ui> <li?v-for="item?of?list">{{item}}</li> </ui> </div>2019-09-04
這個(gè)文本編輯器怎么這么難用
直接上截圖
2019-09-04
<!DOCTYPE?html> <html?lang="zh"> <head> ????<meta?charset="UTF-8"> ????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0"> ????<meta?http-equiv="X-UA-Compatible"?content="ie=edge"> ????<title>TodoList</title> ????<script?src="js/vue.js"></script> </head> <body> ????<div?id="root"> ????????<div> ????????????<input?type="text"?v-model="inputValue"?@keyup.enter="add"> ????????????<button?@click="add">提交</button> ????????</div> ????????<ul> ????????????<li?v-for="(item,?index)?in?list"?:key="index">{{item}}</li> ????????</ul> ????</div> </body> <Script> ????new?Vue({ ????????el:'#root', ????????data()?{ ????????????return?{ ????????????????inputValue:'', ????????????????list:?[] ????????????} ????????}, ????????methods:?{ ????????????add:?function?()?{ ????????????????this.list.push(this.inputValue);this.inputValue=''; ????????????} ????????}, ????}) </Script> </html>2019-09-04
<!DOCTYPE?html><html?lang="zh"><head><meta?charset="UTF-8"><meta?name="viewport"?content="width=device-width,?initial-scale=1.0"><meta?http-equiv="X-UA-Compatible"?content="ie=edge"><title>TodoList</title><script?src="js/vue.js"></script></head><body><div?id="root"><div><input?type="text"?v-model="inputValue"?@keyup.enter="add"><button?@click="add">提交</button></div><ul><li?v-for="(item,?index)?in?list"?:key="index">{{item}}</li></ul></div></body><Script>new?Vue({el:'#root',data()?{return?{inputValue:'',list:?[]}},methods:?{add:?function?()?{this.list.push(this.inputValue);this.inputValue='';}},})</Script></html>2019-09-01
？？什么叫做出現(xiàn)一瞬間，就消失了
2019-09-01
回車后出現(xiàn)一瞬間，然后就消失了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>todolist</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js">
</script>
</head>
<body>
<div id="root">
<div>
<form>
<input v-model="inputVlue" />
<button type="submit" @click="handleSubmit">提交</button>
</form>
<ul>
<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
</ul>
</div>
</div>
<script type="text/javascript">
Vue.component('todo-item', {
props: ['content'],
template: '<li>{{content}}<li/>'
})
new Vue({
el: "#root",
data: {
inputVlue: '',
list: []
},
methods: {
handleSubmit: function() {
this.list.push(this.inputVlue);
this.inputVlue = '';
}
}
})
</script>
</body>
</html>
2019-09-01
把這段
<input v-model="inputVlue" />
<button @click="handleSubmit">提交</button>
上面兩行代碼用<form></form>包起來，<button type="submit" @click="handleSubmit">提交</button>
就可以了