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

代码如下,预期功能是输入为空的情况下提交按钮无法点击,使用计算属性返回布尔变量进行控制,但是实际使用时有值的情况下也无法点击,是哪里出了问题呢

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <script src="vue.js"></script>
</head>

<body>
<div id="root">
     <div>
     <input v-model="inputValue"/>
     <button disabled="loginId" v-on:click="handleClick">Enter</button>
     </div>
     <ul>
     <li v-for="(item,index) of list":key="index">
     {{item}}
     </li>
     </ul>
</div>


<script>
    new Vue({
        el: '#root',
        data:{
        inputValue:'',
        list:[]
        },
        methods:{
        handleClick:function(){
        this.list.push(this.inputValue)
        inputValue=''
        }
        },
        computed: {
        isLogin() {
        return !!inputValue
    }
}
    })
</script>
</body>
</html>

2018-05-13 源自:vue2.5入门 560 浏览 2 回答

最佳回答

2018-05-14

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>todolist</title>

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

</head>


<body>

<div id="root">

     <div>

     <input v-model="inputValue"/>

     <button :disabled="!inputValue" v-on:click="handleClick">Enter</button>

     </div>

     <ul>

     <li v-for="(item,index) of list" :key="index">

     {{item}}

     </li>

     </ul>

</div>



<script>

    new Vue({

        el: '#root',

        data:{

        inputValue:'',

        list:[]

        },

        methods:{

        handleClick:function(){

        this.list.push(this.inputValue)

        inputValue=''

        }

        }

    });

</script>

</body>

</html>


云爆雷声 (提问者)

很有用,谢谢!

#1 2018-05-24 回复
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>todolist</title>    <script src="vue.js"></script></head><body><div id="root">     <div>	     <input v-model="inputValue"/>	     <button :disabled="!inputValue" v-on:click="handleClick">Enter</button>     </div>     <ul>     <li v-for="(item,index) of list" :key="index">     {{item}}     </li>     </ul></div><script>    new Vue({        el: '#root',        data:{	        inputValue:'',	        list:[]        },        methods:{	        handleClick:function(){		        this.list.push(this.inputValue)		        inputValue=''	        }        }    });</script></body></html>

没用computed,这样就可以了.

2018-05-14
回复 0

举报

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