如果我想达到按回车键也能达到提交的效果如何修改代码？

<!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>

qq_pzq_0

2019-09-01

源自：vue2.5入门 3-1

关注问题我要回答

1053

操作

收起

8 回答

qq_慕丝7509465
2019-12-03

搞错！不好意思楼上也是对的。

0 回复有任何疑惑可以回复我~

qq_慕丝7509465
2019-12-03

楼上有误，直接上图，

<div id="root">
<input type="text" id="inputValue" v-model="inputValue" @keyup.enter="handleClick" />
<button v-on:click="handleClick">点击我</button>
<ui>
<li v-for="item of list">{{item}}</li>
</ui>
</div>

0 回复有任何疑惑可以回复我~

精慕门3342737
2019-09-04

这个文本编辑器怎么这么难用

直接上截图

2 回复有任何疑惑可以回复我~

精慕门3342737
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>

0 回复有任何疑惑可以回复我~

精慕门3342737
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>

0 回复有任何疑惑可以回复我~

weixin_慕少7141126
2019-09-01

？？什么叫做出现一瞬间，就消失了

0 回复有任何疑惑可以回复我~

qq_pzq_0 提问者
2019-09-01

回车后出现一瞬间，然后就消失了

<!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>

0 回复有任何疑惑可以回复我~

weixin_慕少7141126
2019-09-01

把这段

<input v-model="inputVlue" />

<button @click="handleSubmit">提交</button>

上面两行代码用<form></form>包起来，<button type="submit" @click="handleSubmit">提交</button>

就可以了

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

参与学习 146813 人
解答问题 657 个

快速理解Vue编程理念上手Vue2.0开发。

本课相似问答

4 回答怎么看代码效果

2 回答如果这样写就没有效果，为什么？

3 回答有一个问题，我发现如果input框里什么也不输入时点击提交仍然能创建一个空的li出来，请问怎么能检测如果input中的值为空不创建li呢

1 回答老师如果我想更换端口8080应该怎么做呢

2 回答按照老师的代码下来我运行不出来结果呀

搜索更多本课相关问答

如果我想达到按回车键也能达到提交的效果如何修改代码？

我要回答关注问题

意见反馈帮助中心 APP下载