<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>test1</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<!-- 这里的style本来是:style="{ opacity: opacity }",这里采用简写方式,因为使用了v-bind,所以value是一个对象 -->
<h1 :style="{ opacity }">Welcome To My Blog</h1>
</div>
<script>
// Vue.config.productionTip = false;
const app = Vue.createApp({
el: "#app",
data() {
return {
opacity: 1
};
},
mounted() {
setInterval(() => {//这里使用定时器实现闪烁效果
this.opacity -= 0.1;
if (this.opacity < 0) {
this.opacity = 1;
}
}, 16);
}
});
app.mount("#app");
</script>
</body>
</html>
扫一扫
03-27
1593
1593
12-09
05-21
868
868
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
