一、vue点击事件获取当前元素的值
使用Vue提供的@click事件可以绑定元素的点击事件，使用这个事件可以轻松地获取到当前点击元素的值。
首先在模板中定义一个元素，并为其绑定@click事件。在事件触发时，Vue会将自动将事件对象传递给回调函数，而事件对象中包含了当前目标元素的引用。
以下是一个简单的示例代码：
<template>
<div>
<ul>
<li v-for="item in items" :key="item" @click="handleClick(item)">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ['apple', 'banana', 'orange']
}
},
methods: {
handleClick(item) {
console.log(item)
}
}
}
</script>
在上面的代码中，我们定义了一个ul元素，使用v-for指令渲染了一个列表。为每个li元素绑定@click事件，并且将当前元素的值传递给handleClick函数。在handleClick函数中，我们可以使用console.log将点击的元素的值输出到控制台中。
二、vue点击事件获取id
获取元素的id可以给我们更精确的标识当前操作的元素，使得操作更加明确。在Vue中，可以使用事件对象.target.id获取当前点击元素的id。
以下是代码示例：
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id" :id="item.id" @click="handleClick">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'apple' },
{ id: 2, name: 'banana' },
{ id: 3, name: 'orange' },
],
}
},
methods: {
handleClick(event) {
console.log(event.target.id);
},
},
}
</script>
在上面的代码中，我们定义了一个ul元素，并使用v-for指令渲染了一个列表。为每个li元素绑定id属性，并使用@click事件绑定事件。在handleClick函数中，我们可以通过事件对象.event.target.id获取当前点击元素的id并打印到控制台中。
三、vue点击事件获取当前元素中的内容
有时我们需要获取元素中的内容，根据内容做出下一步的操作。在Vue中，可以通过事件对象.target.innerHTML获取当前元素的内容。
以下是代码示例：
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id" @click="handleClick">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'apple' },
{ id: 2, name: 'banana' },
{ id: 3, name: 'orange' },
],
}
},
methods: {
handleClick(event) {
console.log(event.target.innerHTML);
},
},
}
</script>
在上面的代码中，我们定义了一个ul元素，并使用v-for指令渲染了一个列表。在handleClick函数中，我们可以通过事件对象.target.innerHTML获取当前点击元素中的内容并打印到控制台中。
四、vue获取点击的元素选取
在Vue中，我们可以使用refs来获取元素的引用，然后对元素进行选取、操作等。refs是Vue中专门用于获取元素引用的方法，在所有生命周期函数、methods方法中都可以访问refs。
以下是示例代码：
<template>
<div>
<ul ref="items">
<li v-for="item in items" :key="item.id" @click="handleClick">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'apple' },
{ id: 2, name: 'banana' },
{ id: 3, name: 'orange' },
],
}
},
methods: {
handleClick() {
const items = this.$refs.items;
// 对元素进行选取、操作等...
},
},
}
</script>
在上面的代码中，我们定义了一个ul元素，并使用v-for指令渲染了一个列表。我们使用ref属性将ul元素命名为items，在handleClick函数中，通过this.$refs.items获取到ul元素的引用，并进行后续的选取、操作等处理。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/275874.html
微信扫一扫 
支付宝扫一扫 