Question

通常，当我为keyup和keypress事件及其相应的vue代码的输入标签编写代码时，就会出现此错误，但是当我编写
keydown事件的下一个输入标签及其相应的vue代码我遇到了错误像

直到两次输入，我都较早地运行了此代码，所以我删除了新代码及其对应的vue代码，然后再次运行，但是现在我在正确的先前代码中仍然遇到错误

// leckeyboadevent.html

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script src="https://unpkg.com/vue@2.6.6/dist/vue.js"></script>
</head>
<body>
    <div id="myapp">
        <input type="text" placeholder="keypress"  @keypress="keypressfun" >
        <br\>

        <input type="text" placeholder="keyup" @keyup="keyupfun">
        <br\>

        <input type="text" placeholder="keydown" @keydown="keydownfun">

    </div>
    <script src="lec6keyboardevent.js"></script>
</body>
</html>

//这是我的js文件

var myapp=new Vue({
    el:"#myapp",
    data:{

    },
    methods:{
        keypressfun:function(event){
            console.log(event.key);
        },
        keyupfun:function(event)//this works when key release
        {
            console.log(event);
        },
        keydownfun:function()
        {
            console.log("keydown");
        }
    }
});

i am getting error 
vue.js:634 [Vue warn]: Failed to generate render function:

SyntaxError: Unexpected string in

with(this){return _c('div',{attrs:{"id":"myapp"}},[_c('input',{attrs:{"type":"text","placeholder":"keypress"},on:{"keypress":keypressfun}}),_v(" "),_c('br',{attrs:{"\":""}}),_v(" "),_c('input',{attrs:{"type":"text","placeholder":"keyup"},on:{"keyup":keyupfun}}),_v(" "),_c('br',{attrs:{"\":""}}),_v(" "),_c('input',{attrs:{"type":"text","placeholder":"keydown"},on:{"keydown":keydownfun}}),_v(" "),_c('br'),_c('br')])}


(found in <Root>)

Answer 1

您好@ user9083922我认为问题是您如何关闭html标签。您是否尝试以标准方式<br/>而非<br\>关闭br标签？

它应该适用于此更改。

此外，如果需要，<br>标签不需要在html5中关闭，因为它们是空元素。

有关更多信息，您可以检查： https://www.w3.org/TR/html/syntax.html#writing-html-documents-elements

[Vue警告]：无法生成渲染功能：SyntaxError：出现意外字符串

1 个答案: