vue3 ts 两class共存写法

雪狼之夜

已于 2023-01-04 11:51:34 修改

阅读量590

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-01-04 11:47:10 首次发布

本文链接：https://blog.csdn.net/xuelang532777032/article/details/128545701

版权

vue 专栏收录该内容

109 篇文章 7 订阅

订阅专栏

该代码示例展示了在Vue.js中如何使用ref和computed属性来响应式地改变元素状态和处理事件。通过ref绑定按钮元素，改变其值并在点击事件中模拟异步操作。同时，利用computed属性根据条件获取元素的data-id属性。

摘要由CSDN通过智能技术生成

<script setup lang="ts">
    import { onMounted, ref,computed } from 'vue'
    const addbg=ref<boolean>(false);
    const aEvent=()=>{
        addbg.value=!addbg.value
    }
    const txtDom=ref<HTMLButtonElement|null>(null);
    
    const btnEvent=(el:any)=>{
        el.target.dataset.id=1
        qHuan.value=true
    }
    const qHuan=ref(false)
    const btnDataId=computed(()=>{
        return qHuan.value?(txtDom.value as any).dataset.id:"无值"
    })
    onMounted(()=>{
        setTimeout(()=>{
            (txtDom.value as HTMLButtonElement).value="ref切换自身属性"
        },1000)
    })
</script>
<template>
    <div class="box">
        <h3></h3>
        <div>
            <input type="text" class="bor_red" :class="{'bor_bg':addbg}" />
            <br/>
            <a href="http://baidu.com" value="你好" @click.prevent="aEvent">A标签切换input背景</a>
            <br/>
            <input type="button" ref="txtDom" value="1秒变文字" @click="btnEvent"/>
            <br/>
            txtDom的data-id是:{{btnDataId}}
        </div>
    </div>
    
</template>
<style>
    .box{display: block;text-align:center;margin: 50px 0 0;}
    .ml_10{margin-left:10px}
    .bor_red{border:1px red solid;}
    .bor_bg{background: blue;}
</style>