wx:for="{{img}}怎么在js里面获取数据
时间: 2023-11-01 22:20:33 浏览: 29
在js中,可以通过定义一个数组变量 `img` 来存储需要渲染的数据,例如:
```javascript
var img = [
{src: "https://example.com/image1.jpg", alt: "image1"},
{src: "https://example.com/image2.jpg", alt: "image2"},
{src: "https://example.com/image3.jpg", alt: "image3"},
];
```
然后,在WXML中使用 `wx:for="{{img}}"` 来循环渲染这个数组中的数据。例如:
```html
<view wx:for="{{img}}" wx:key="alt">
<image src="{{item.src}}" alt="{{item.alt}}" />
</view>
```
在上面的例子中,`wx:for="{{img}}"` 表示循环渲染 `img` 数组中的每一个元素,`wx:key="alt"` 是为了提高渲染效率而设置的一个标识,表示使用 `alt` 属性作为每个元素的唯一标识。在循环过程中,可以通过 `item` 来访问当前元素的属性值。
相关问题
<view class="placeholder" bindlongpress="delect"> <view wx:for='{{pageList}}' wx:key="_id" class="event-list"> <navigator url="../home/imgshow?id={{item._id}}" class="event-link" > <view class="event-img" > <image mode="widthFix" src="{{item.fileID}}"> </image> </view> <view class="event-content" data-aid="{{item._id}}"> <view class="event-title" >"{{item.name}}"</view> <view class="event-desc">"{{item.discribe}}"</view> <view class="event-box"> <view class="event-time">"{{item.time}}"</view> </view> </view> </navigator> </view> </view> 在以上微信小程序wxml代码中为什么delect方法中event.currentTarget.dataset.aid显示undefined
在这段代码中,`bindlongpress="delect"`是给`view`标签绑定了一个长按事件,而在该标签内部的子组件`navigator`标签则通过`data-aid`属性绑定了一个自定义数据。长按事件触发时会自动传入一个`event`对象,其中包含了触发事件的相关信息,如当前组件的一些数据,可以通过`event.currentTarget.dataset`来获取。而在`delect`方法中,`event.currentTarget`指的是当前触发事件的组件,而不是绑定了`data-aid`属性的`navigator`标签,因此无法获取到该属性的值。要想获取`data-aid`的值,可以将`delect`方法绑定到`navigator`标签上,或者使用`event.target.dataset`来获取。例如:
```
<view class="placeholder">
<view wx:for='{{pageList}}' wx:key="_id" class="event-list">
<navigator url="../home/imgshow?id={{item._id}}" class="event-link" data-aid="{{item._id}}" bindlongpress="delect">
<view class="event-img">
<image mode="widthFix" src="{{item.fileID}}"></image>
</view>
<view class="event-content">
<view class="event-title">"{{item.name}}"</view>
<view class="event-desc">"{{item.discribe}}"</view>
<view class="event-box">
<view class="event-time">"{{item.time}}"</view>
</view>
</view>
</navigator>
</view>
</view>
// JS代码
Page({
delect: function(event) {
console.log(event.target.dataset.aid);
}
})
```
<view class="fb_content"> <textarea value="{{textVal}}" bindinput="handleTextInput" placeholder="请描述一下您的问题"> </textarea> <view class="fb_tool"> <button bindtap="handleChooseImg">+</button> <view class="up_img_item" wx:for="{{chooseImgs}}" wx:key="*this" bindtap="handleRemoveImg" data-index="{{index}}"> <UpImg src="{{item}}"></UpImg> </view> </view> </view> handleChooseImg() { // 2 调用小程序内置的选择图片api wx.chooseImage({ // 同时选中的图片的数量 count: 9, // 图片的格式 原图 压缩 sizeType: ['original', 'compressed'], // 图片的来源 相册 照相机 sourceType: ['album', 'camera'], success: (result) => { this.setData({ // 图片数组 进行拼接 chooseImgs: [...this.data.chooseImgs, ...result.tempFilePaths] }) } }); }, // 点击 自定义图片组件 handleRemoveImg(e) { // 2 获取被点击的组件的索引 const { index } = e.currentTarget.dataset; // 3 获取data中的图片数组 let { chooseImgs } = this.data; // 4 删除元素 chooseImgs.splice(index, 1); this.setData({ chooseImgs }) },在hbuilderx的vue上要怎么改才可以
要在HBuilderX中将这段代码改为Vue.js代码,您需要进行以下修改:
1. 将`<view>`标签改为`<div>`标签。
2. 将`<textarea>`标签的`value`属性改为`v-model`,将`bindinput`事件改为`@input`。
3. 将`<button>`标签的`bindtap`属性改为`@click`。
4. 将`<view>`标签的`wx:for`属性改为`v-for`,将`wx:key`属性改为`:key`。
5. 将`<UpImg>`标签替换为相应的自定义图片组件。
6. 在Vue组件的`data`选项中定义 `textVal` 和 `chooseImgs` 变量,并在 `<textarea>` 和 `<UpImg>` 标签中使用相应的数据绑定。
7. 将`this.setData()`改为直接修改Vue组件的数据。
修改后的代码如下所示:
```vue
<template>
<div class="fb_content">
<textarea v-model="textVal" @input="handleTextInput" placeholder="请描述一下您的问题"></textarea>
<div class="fb_tool">
<button @click="handleChooseImg">+</button>
<div class="up_img_item" v-for="(item, index) in chooseImgs" :key="index" @click="handleRemoveImg(index)">
<UpImg :src="item"></UpImg>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
textVal: '',
chooseImgs: []
};
},
methods: {
handleTextInput(event) {
this.textVal = event.target.value;
},
handleChooseImg() {
// 调用小程序内置的选择图片api
wx.chooseImage({
// 同时选中的图片的数量
count: 9,
// 图片的格式 原图 压缩
sizeType: ['original', 'compressed'],
// 图片的来源 相册 照相机
sourceType: ['album', 'camera'],
success: (result) => {
// 图片数组进行拼接
this.chooseImgs = [...this.chooseImgs, ...result.tempFilePaths];
}
});
},
handleRemoveImg(index) {
// 删除元素
this.chooseImgs.splice(index, 1);
}
}
};
</script>
```
请注意,以上代码只是根据您提供的原始代码进行的修改,可能还需要根据您的具体需求进行调整。另外,如果您在HBuilderX中使用Vue.js,请确保已正确配置Vue.js开发环境。
希望以上信息对您有所帮助!如果您有任何其他问题,请随时提问。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![.zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)