请稍等 ...
×

采纳答案成功！

向帮助你的同学说点啥吧！感谢那些助人为乐的人

清空input框value值

看了其他同学提的问题
您的回答 inputValue.value = ""
inputValue在addItemToList中，没有这个变量
shalama 2021-03-26 18:15:53
源自：6-7  使用 Composition API 开发TodoList（2）
1559
收起

正在回答 回答被采纳积分+3

插入代码

提交 取消

5回答

慕少3567675 2021-04-15 11:42:32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
  <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>lesson</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root">
      <div>
        <input v-model="inputValue" />
        <button @click="addItemToList">添加</button>
      </div>
      <ul>
        <li v-for="(item,index) in list" :key="index">{{item}}</li>
      </ul>
    </div>
  </body>
  <script>
    const listRelativeEffect = (inputValue, resetInputValue) => {
      const { reactive } = Vue;
      const list = reactive([]);
      const addItemToList = () => {
        list.push(inputValue.value);
        resetInputValue();
      };
      return { list, addItemToList };
    };
 
    const inputRelativeEffect = () => {
      const { ref } = Vue;
      const inputValue = ref("");
      const resetInputValue = () => {
        inputValue.value = "";
      };
      return { inputValue, resetInputValue };
    };
 
    const app = Vue.createApp({
      setup() {
        const { inputValue, resetInputValue } = inputRelativeEffect();
        const { list, addItemToList } = listRelativeEffect(
          inputValue,
          resetInputValue
        );
 
        return {
          list,
          addItemToList,
          inputValue,
        };
      },
    });
 
    const vm = app.mount("#root");
  </script>
</html>


参考诺亚诺亚同学的问答，改成这样的话可以实现点击按钮添加数据到列表后，清空input框的内容。

2 回复 有任何疑惑可以回复我~
收起回答
取消 回复
GalenT 2023-05-28 23:53:28

导出一个resetInputValue，然后再将resetInputValue函数传入listRelativeEffect函数中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html lang="en">
 
<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>Document</title>
    <script src="../../vue.global.js"></script>
</head>
 
<body>
    <div id="root"></div>
    <script>
        const listRelativeEffect = () => {
            const { reactive } = Vue;
            const list = reactive([]);
            const addItemToList = (item, resetInputValue) => {
                list.push(item);
                resetInputValue();
            };
            return { list, addItemToList }
        }
 
        const inputRelativeEffect = () => {
            const { ref } = Vue;
            const inputValue = ref('');
            const handleInputValueChange = (e) => {
                inputValue.value = e.target.value;
            };
            const resetInputValue = () => {
                inputValue.value = "";
            }
            return { inputValue, handleInputValueChange, resetInputValue };
        }
 
        const app = Vue.createApp({
            setup() {
                const { list, addItemToList } = listRelativeEffect();
                const { inputValue, handleInputValueChange, resetInputValue } = inputRelativeEffect();
                return { list, addItemToList, inputValue, handleInputValueChange, resetInputValue }
            },
 
            template: `
            <div>
                 
                <div>
                    <div>{{inputValue}}</div>
                    <input :value="inputValue" @input="handleInputValueChange"/>
                    <button @click="addItemToList(inputValue, resetInputValue)">添加</button>
                </div>
                <div>
                    <ul>
                        <li v-for="item in list" :key="item">{{item}}</li> 
                    </ul>
                </div>
            </div>
            `
        });
        const vm = app.mount('#root');
    </script>
</body>
 
</html>


1 回复 有任何疑惑可以回复我~
收起回答
取消 回复
avisionav 2021-08-28 14:30:11

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script src="https://unpkg.com/vue@next" type="text/javascript" charset="utf-8"></script>

</head>

<body>

<div id="root"></div>

</body>

</html>

<script>


//封装对List的操作

const listEffect=()=>{

const {reactive}=Vue;

const list=reactive([1,2]);

const addItem=(inputValue)=>{

list.push(inputValue)

}

return {

list,

addItem,

}

}

const inputEffect=()=>{

const {ref}=Vue;

const inputValue=ref('123');

const resetValue=()=>{

inputValue.value=""

}

return {

inputValue,

resetValue,

}

}

const app=Vue.createApp({

setup(){

//流程调度中转

const {inputValue,resetValue} = inputEffect()

const {list, addItem} = listEffect() //获取函数执行的返回值

const addItemToList=()=>{

addItem(inputValue.value)//先添加

resetValue()//再清空

}

return {

list, 

addItemToList,

inputValue,

}

},

template:`

<div>

<div>

<input v-model="inputValue" />

<button @click="addItemToList">添加</button>

</div>

<ul>

<li v-for="(item,index) in list" :key="index">{{item}}</li>

</ul>

</div>

`

})

const vm=app.mount("#root")

</script>

1
<br>


0 回复 有任何疑惑可以回复我~
收起回答
取消 回复
慕少3567675 2021-04-15 11:20:27

我也遇到这样的问题，不知道怎样清空input框value值。因为addItemToList函数里面不知道怎样获取响应式的inputValue。

0 回复 有任何疑惑可以回复我~
收起回答
取消 回复
Dell 2021-03-27 20:32:22

嗯？同学你是帮我做个解答是吗？

0 回复 有任何疑惑可以回复我~
收起回答
  • 慕少3567675 #1 
    按照老师的代码，将list和input的逻辑分开写之后。在点击button的时候，将input的数据push进list，但是不知道怎样才能清空input的数据。因为在addItemToList函数里面无法获取响应式的inputValue，只有传进来的item参数。
    回复 有任何疑惑可以回复我~ 2021-04-15 11:14:06
取消 回复

相似问题

请问 9-2 搜索框点击右边叉以后，input中的值怎么清空呢？我试了一些办法都不行；
772 0 5
清空 input 框
758 3 4
点击电影搜索框中的叉号，如何把搜索框input中的内容清除呢？
1216 0 3
老师，当点击add时，input框中内容怎么清除？
793 1 3
关闭搜索框如何同时清空input框的文本？
770 0 5

登录后可查看更多问答，登录/注册

问题已解决，确定采纳
还有疑问，暂不采纳
Vue3入门与项目实战 掌握完整知识体系
  • 参与学习       3363    人
  • 提交作业       1938    份
  • 解答问题       1450    个

明星讲师DELL亲授，全方位知识点+高匹配度项目，入门到深度掌握

了解课程

本课精华内容

问答 作业

https://www.fastmock.site/#/project/6581 依旧提示失败或项目不存在

297 1

获取本地存储信息报错

1.4k 18

老师，如果提取use方法如何传递$event

1.3k 14

老师，后台接口访问不了了

1.1k 12

上线手在用电脑打开无法显示图片

1.0k 11

查看更多本课问答
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号