为了账号安全,请及时绑定邮箱和手机立即绑定
关注
qq_pzq_0

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

<!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-09-01 源自:vue2.5入门 3-1 97 浏览 6 回答

把这段

<input v-model="inputVlue" />

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

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

就可以了


2019-09-01
回复 0

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

<!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
回复 0

??什么叫做出现一瞬间,就消失了

2019-09-01
回复 0
<!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
回复 0
<!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
回复 0

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

直接上截图

http://img3.mukewang.com/5d6f8e2b00018b4305880213.jpg

2019-09-04
回复 0

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信