空哥sky 2024-04-17 19:25 采纳率: 47.1%
浏览 5
已结题

vue为什么v-if失效了啊

为什么v-if失效了啊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-if="count==3">div1</div>
    <div v-else-if="count==4">div2</div>
    <div v-else>div3</div>

    <br>

    <input v-model="count">


</div>

<script src="js/vue.js"></script>
<script>

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com",
                count:3
            }
        },
        methods:{
            show(){
                alert("我被点了...");
            }
        }
    });

</script>


</body>
</html>

img


输出结果不应该是div1吗？为什么v-if和v-else-if失效了啊

  • 写回答

4条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-04-17 19:25
    关注

    引自免费微信小程序：皆我百晓生

    在您提供的代码中，v-if 和 v-else-if 没有正常工作的原因在于它们依赖于变量 count 的值，但在这个例子中，用户可以通过输入框直接修改 count 的值。然而，由于 Vue 中的响应式系统设计，直接对数据对象的属性进行赋值（比如 count = 5）不会触发视图更新。

    要解决这个问题，你需要确保当用户改变输入框的值时，能正确地更新 count 并触发视图更新。可以使用 v-on:input 事件监听输入框的变化，并通过一个方法处理新的值。以下是修改后的代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <div v-if="count===3">div1</div>
    <div v-else-if="count===4">div2</div>
    <div v-else>div3</div>

    <br>

    <input v-model="count" @input="updateCount">

</div>

<script src="js/vue.js"></script>
<script>

    //1. 创建Vue核心对象
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com",
                count:3
            }
        },
        methods: {
            updateCount(newVal) {
                this.count = parseInt(newVal);
            }
        }
    });

</script>

</body>
</html>

    这里的主要更改是：

    1. 在输入框上添加了 @input 事件监听器，将其绑定到 updateCount 方法。
    2. 创建了一个名为 updateCount 的新方法，它接收输入框的新值作为参数，然后将这个值转换为整数并赋给 this.count。这样做的原因是确保 count 总是一个数字，以便与 v-if 和 v-else-if 条件匹配。

    现在，当用户在输入框中输入数字并离开输入框时，会调用 updateCount 方法，更新 count 的值，并且 v-if 和 v-else-if 将根据新值正确地显示或隐藏相应的 div。

    评论 编辑记录

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 4月17日
  • 创建了问题 4月17日