vue 将{}之间的字符串替换成span标签并加上点击事件

Lucky铂爵

已于 2024-01-02 16:14:56 修改

阅读量836

点赞数 12

文章标签： vue.js javascript 前端

于 2024-01-02 16:14:01 首次发布

本文链接：https://blog.csdn.net/weixin_44816309/article/details/135343572

版权

<template>
    <div>
        <div ref="content" v-html="replaceText"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            text: 'Hello {你好}'
        };
    },
    computed: {
        replaceText() {
            return this.text.replace(/\{(.*?)\}/g, '<span class="aaa">$1</span>');
        }
    },
    mounted() {
        this.$nextTick(() => {
            const els = this.$refs.content.querySelectorAll('.aaa');
            els.forEach(element => {
                element.addEventListener('click', event => {
                    this.handleClick(event);
                });
            });
        });
    },
    methods: {
        handleClick(event) {
            console.log('---', event.target.textContent);
        }
    }
};
</script>

<style>
.aaa {
    cursor: pointer;
    color: red;
}
</style>