箭头函数使用
const inputList=()=>{
const{reactive}=Vue;
const list= reactive([]);
const addList = (item)=>{
list.push(item);
};
return{list ,addList};
};
const inputAddValue=()=>{
const {ref}=Vue;
const inputValue=ref('1');
const handInputchange=(e)=>{
inputValue.value=e.target.value;
}
return{inputValue,handInputchange};
}
const app =Vue.createApp({
setup(){
const {list,addList}=inputList();
const {inputValue,handInputchange}=inputAddValue();
const newaddList=()=>{addLst(inputValue)};
return {list,inputValue,handInputchange,newaddList};
},
template:`<div>
<input :value="inputValue" @input="handInputchange" />
<button @click="newaddList">提交</button>
<div>
<ul>
<li v-for="(it,idex) in list" :key="idex">{{it}}</li>
</ul>
</div>
</div> `
})
我在setup中 有用箭头函数 出现
{ "_rawValue": "1324234234", "_shallow": false, "__v_isRef": true, "_value": "1324234234" }
{ "_rawValue": "1324234234", "_shallow": false, "__v_isRef": true, "_value": "1324234234" }
{ "_rawValue": "1324234234", "_shallow": false, "__v_isRef": true, "_value": "1324234234" }
{ "_rawValue": "1324234234", "_shallow": false, "__v_isRef": true, "_value": "1324234234" }
{ "_rawValue": "1324234234", "_shallow": false, "__v_isRef": true, "_value": "1324234234" }
但是直接在标签中使用箭头函数则没有问题
正在回答 回答被采纳积分+1
同学你好，解答如下：
inputValue这个数据本身形式就是{ "_rawValue": "1324234234", "_shallow": false, "__v_isRef": true, "_value": "1324234234" }，如下：
其中属性_value中，存储着它的值（我们输入的内容）：
在模板中使用inputValue时，模板会自动解析出inputValue中的_value部分，即模板中的inputValue就是_value的值：
所以将箭头函数写在模板中时，传入addList方法中的inputValue就是“值”，而不是{ "_rawValue": "1324234234", "_shallow": false, "__v_isRef": true, "_value": "1324234234" }这种对象：
而将箭头函数写在setup中时，传给addList的就是完整的inputValue（{ "_rawValue": "1324234234", "_shallow": false, "__v_isRef": true, "_value": "1324234234" }），所以结果是同学写的那样：
因此建议将箭头函数写在模板中。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星