代码如下，预期功能是输入为空的情况下提交按钮无法点击，使用计算属性返回布尔变量进行控制，但是实际使用时有值的情况下也无法点击，是哪里出了问题呢
云爆雷声
2018-05-13 13:40
<!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>
2回答
-
- 星空下的仓颉
- 2018-05-14 14:33:11
<!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>
-
- 星空下的仓颉
- 2018-05-14 14:32:09
<!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,这样就可以了.
vue2.5入门
146825 学习 · 657 问题
相似问题