1.Vue3-屬性綁定
2.定時(shí)任務(wù)
1.Vue3-屬性綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- vue.js -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.dvcolor {
color: red;
}
.dvgreen{
color: green;
}
</style>
</head>
<body>
<div id="app">
<!-- 3.屬性-綁定 :屬性名 -->
<div :class="dvcls" @click="change">
<h1>你的心情</h1>
</div>
</div>
</body>
<script>
// 引入
const {createApp, ref} = Vue
// 創(chuàng)建
createApp({
//setup 標(biāo)記 Vue3 支持Vue3的語法 直接定義變量、函數(shù)都可以
setup() {
const dvcls = ref("dvcolor")
const change = () => {
console.log(dvcls.value)
if (dvcls.value == "dvcolor") {
dvcls.value = "dvgreen"
} else {
dvcls.value = "dvcolor"
}
}
return {//只有返回的上面才可以使用
dvcls,change
}
}
}).mount('#app')
</script>
</html>
文章來源地址http://www.zghlxwxcb.cn/news/detail-724076.html
2.定時(shí)任務(wù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- vue.js -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
.dvcolor {
color: red;
}
.dvgreen {
color: green;
}
</style>
</head>
<body>
<div id="app">
<!-- 3.屬性-綁定 :屬性名 -->
<div :class="dvcls" @click="change">
<h1>你的心情</h1>
</div>
</div>
</body>
<script>
// 引入
const {createApp, ref} = Vue
// 創(chuàng)建
createApp({
//setup 標(biāo)記 Vue3 支持Vue3的語法 直接定義變量、函數(shù)都可以
setup() {
const dvcls = ref("dvcolor")
var t;
const change = () => {
console.log(dvcls.value)
if (t != null) {
//js 關(guān)閉定時(shí)任務(wù)
clearInterval(t)
} else {
//js 開啟定時(shí)任務(wù)
t = setInterval(() => {
if (dvcls.value == "dvcolor") {
dvcls.value = "dvgreen"
} else {
dvcls.value = "dvcolor"
}
}, 1000)
}
if (dvcls.value == "dvcolor") {
dvcls.value = "dvgreen"
} else {
dvcls.value = "dvcolor"
}
}
return {//只有返回的上面才可以使用
dvcls, change
}
}
}).mount('#app')
</script>
</html>
文章來源：http://www.zghlxwxcb.cn/news/detail-724076.html
到了這里，關(guān)于Vue3-屬性綁定、定時(shí)任務(wù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
