ul 下添加li标签模板后 第一个li前面有一个undefined(问题记录)

1 话不多说 直接上图  不知道哦啊大家碰到过这种情况没有 将li的模板添加到ul 下面时出现了一个undefined  无缘无故出现的有木有(如下图)

2 让我们看看相关代码(下图) render函数 和tpl 函数 tpl函数看是没有问题的  但是为什么tpl添加上去就会有undefined了 那就只剩下render函数了 但是就这么几行,问题在哪呢? 



3 问题就在 var  html   声明html变量时 没有赋值  但是在这种情况下 js 是默认赋值了 undefined  即 var  html = undefined

所以html += 时  初始html = undefined   然后字啊+++++++++后面的li模板字符串 所以出现了第一张图的情况,我们解决它还是 var html = “” 吧 因为我们开始的目的也是让html 是空字符串 只是var  的原理没理解透彻导致出现以上的问题

下图就解决了这个问题,萌新小伙伴们不知道你们遇到过没有哇




在Vue.js中,子组件和父组件之间的实时传值通常通过props和事件(emit)配合来实现。假设你有一个多选框组件作为子组件,你想让父组件控制其选项: 1. **父组件向子组件传递数据**: 父组件可以将需要传递给子组件的数据作为prop传入。创建一个名为`options`的对象数组,并在组件的`data`属性中声明。 ```javascript <template> <child-component :options="filteredOptions" @queryChange="handleQueryChange"></child-component> </template> <script> export default { data() { return { options: [ // ... 初始化的选项列表 ], filteredOptions: [], // 初始默认显示所有选项 }; }, methods: { handleQueryChange(newOptions) { this.filteredOptions = newOptions; } } }; </script> ``` 在这个例子中,`:options`是v-bind绑定,`@queryChange`是v-on监听事件。 2. **子组件接收并处理父组件的数据**: 子组件在接收到`options`后,可以在模板中展示它们,并添加一个方法响应用户的选择。当多选框状态改变时,使用`$emit`触发`queryChange`事件,将新的选项传回给父组件。 ```html <template> <div> <ul v-for="(option, index) in options" :key="index"> <li> <input type="checkbox" v-model="selectedItems[index]" /> {{ option.text }} </li> </ul> <button @click="handleQuery">查询</button> </div> </template> <script> export default { props: { options: Array, }, data() { return { selectedItems: Array(options.length).fill(false), // 初始状态设为未选中 }; }, methods: { handleQuery() { const newOptions = this.selectedItems.map((selected, i) => (selected ? this.options[i] : undefined)); this.$emit('queryChange', newOptions); } } }; </script> ``` 当父组件接收到`queryChange`事件时,它可以根据新传来的选项更新`filteredOptions`,从而达到子组件选择消失的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值