Vue双向绑定失效 v-model

项目场景:

Vue做实例时发现我的双向绑定不能正常出效果,但是数据确实是有实时修改,只是页面展示时没有渲染出来。


问题描述:

大概就是这种情况,我没明白怎么整动图上去,就讲究看一下吧。

Vue双向绑定失效 v-model_第1张图片

input框里的数据修改时,vue的data的数据确实是改变了,但是没有渲染到页面显示中

这里放一下出错的代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <input type="text" v-model="num">
    <button v-on:click="num++">点我</button>
    <h2>
        {{name}}太大了,{{num}}位女神用了都说受不了
    </h2>
</div>

<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

</body>

<script>
    // 创建vue实例
    var app = new Vue({
        el: "#app", // el即element,该vue实例要渲染的页面元素
        data: { // 渲染页面需要的数据
            name: "张三",
            num: 5
        }
    });

    var app6 = new Vue({
        el: '#app-6',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>


</html>

原因分析:

可以参考一下大佬的叙述,问题大概就是这样:我是一个超链接

大概是因为谷歌翻译的问题导致的。


解决方案:

我先按照大佬的办法改了源码,但是感觉效果貌似不是很明显,好像改了之后也只能是在页面为英文显示时,也就是这样

Vue双向绑定失效 v-model_第2张图片

的情况下好使,转成中文还是会失效,可以尝试把页面的 lang参数改成中文再试试 做调整后的成功的样子:

Vue双向绑定失效 v-model_第3张图片

你可能感兴趣的:(JAVA已排查问题小计,vue,java,js,javascript)