html使用vue无响应【vue】

最新推荐文章于 2023-03-20 16:44:51 发布

原创最新推荐文章于 2023-03-20 16:44:51 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #computed

错误记录专栏收录该内容

27 篇文章

订阅专栏

本文介绍了在Vue.js中遇到的使用onclick事件处理函数导致的无响应问题，以及尝试通过调用方法解决问题时遇到的错误。最终通过将事件监听器改为@click并调整DOM结构解决了问题，展示了在Vue项目中使用@click的正确方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html使用vue无响应

出错情况

我尝试用以下代码测试Vue的computed

onclick

<!DOCTYPE html>
<html lang="zh_cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习--第二章</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  
    <div id="app">
        <p>总价格：{{totalPrice}}</p>
        <p>单价：{{price}}</p>
        <p>数量：{{num}}</p>
    </div>

    <div>
        <button onclick="num == 0 ? 0 : num --"> 减少数量 </button>
        <button onclick="num ++">增加数量</button>
    </div>
  
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                price: 20,
                num: 0,
            },
            method:{
                decreaseNum(){
                    this.num == 0 ? 0 : this.num --;
                    console.log(this.num);
                },
                increaseNum(){
                    this.num ++;
                    console.log(this.num);

                }
            },
            computed: {
                totalPrice() {
                    return this.price * this.num;
                }
            }
        })
    </script>

</body>
</html>

结果报以下的错

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SkmmIg5w-1646717446162)(assets/image-20220307135233-3abwzth.png)]

调用方法

于是我又尝试调用方法去实现效果，结果也报错

<div id="app">
        <p>总价格：{{totalPrice}}</p>
        <p>单价：{{price}}</p>
        <p>数量：{{num}}</p>
    </div>

    <div>
        <button onclick="decreaseNum"> 减少数量 </button>
        <button onclick="increaseNum">增加数量</button>
    </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1iHw0Rss-1646717461466)(assets/image-20220307135549-7u21i3g.png)]

@click

上面的方法都不行后，我尝试用@click去实现，结果错的确没报错了，但是根本没反应……

解决问题

于是我开始尝试自己解决问题，然后我看见了这个代码el:#app

结合el唯一跟标签的定义+项目实际应用只能有一个大div的情况。

我尝试直接将其移动至app的div中去

<!DOCTYPE html>
<html lang="zh_cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习--第二章</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <p>总价格：{{totalPrice}}</p>
        <p>单价：{{price}}</p>
        <p>数量：{{num}}</p>


        <div>
            <button @click="num == 0 ? 0 : num--"> 减少数量 </button>
            <button @click="num++">增加数量</button>
        </div>

    </div>


    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                price: 20,
                num: 0,
            },
            methods: {
                decreaseNum() {
                    this.num == 0 ? 0 : this.num--;
                    console.log(this.num);
                },
                increaseNum() {
                    this.num++;
                    console.log(this.num);

                }
            },
            computed: {
                totalPrice() {
                    return this.price * this.num;
                }
            }
        })
    </script>

</body>

</html>

结果成了，出现我期望的结果

请添加图片描述

当然按钮的@click也同样等价与v-on:click，但是在vue风格指南中，推荐使用简写

 <div id="app">
        <p>总价格：{{totalPrice}}</p>
        <p>单价：{{price}}</p>
        <p>数量：{{num}}</p>


        <div>
            <button v-on:click="num == 0 ? 0 : num--"> 减少数量 </button>
            <button v-on:click="num++">增加数量</button>
        </div>

    </div>