効果
ページスタイル
コンソールの最初の行をクリックして情報を出力します
コード
:data-id="item.id" : ID 情報を定義します。e.currentTarget.dataset.id は、イベントがクリックされたときにクリックされた行の ID を取得します。
:data-index="index" : インデックス情報を定義します。イベントがクリックされたときに、e.currentTarget.dataset.indexがクリックされた行のインデックスを取得します。
:data-item="item" : 項目情報を定義します。クリックイベントが発生すると、e.currentTarget.dataset.itemはクリックされた行の全行情報を取得します。
<template>
<view>
<view class="item_all" v-for="(item, index) in allinfo" :key="index">
<view class='position' :data-id="item.id" :data-index="index" :data-item="item" @tap="deatil">
<view class="vv_1">id: {
{item.id}}</view>
<view class="vv_1">name: {
{item.name}}</view>
<view class="vv_1">age: {
{item.age}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
allinfo: [{
id: 1,
name: '张三',
age: '12'
},
{
id: 2,
name: '李四',
age: '21'
},
{
id: 3,
name: '王五',
age: '44'
},
]
};
},
methods: {
deatil(e) {
console.log("id:"+e.currentTarget.dataset.id)//获取行id信息
console.log("index:"+e.currentTarget.dataset.index)//获取索引index信息
console.log(e.currentTarget.dataset.item)//获取整行信息
}
}
};
</script>
<style>
.item_all {
margin-bottom: 3%;
}
.position {
padding: 6% 0;
width: 100%;
background-color: #fff;
box-shadow: 4rpx 4rpx 4rpx gainsboro;
}
.vv_1 {
margin: 0 5%;
word-break: break-all;
}
</style>