<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
article{
transition: 0.7s;
}
.light{
background: #f0f0f0f0;
color: #020101;
}
.dark{
background: #333;
color: #f0f0f0;
}
.btn-wrapper{
position: relative;
}
ul{
position: absolute;
background: #fff;
padding: 20px;
border: 2px solid salmon;
bottom: 0;
left: 200px;
}
</style>
</head>
<body>
<div class="book">
<article :class="mode" :style="'font-size :'+ fontSize + 'px;'">
<p>小瀛洲外小红楼</p>
<p>义比恩情永相映</p>
<p>我念梅花花念我</p>
<p>爱女从来甚爱儿</p>
<p>你自归家我自归</p>
</article>
<div class="btn-wrapper">
<ul v-show="showMenu">
<li v-for ="i in 5" @click="setFontSize( 16 + i * 2)" :style="{'color':fontSize === 16+i*2?'red':'gray'}">
{{ 16 + i * 2}}
</li>
</ul>
<!-- 在方法中 data 和 其他方法的访问 不需要加 this 但是在插值绑定的时候 需要 -->
<button @click ="showMenu = !showMenu ">A+</button>
<button :class="mode" v-on:click="toggleMode"> {{mode === 'light'?'🌙':'☀'}}</button>
<p>当前字体大小是 {{fontSize}} px</p>
</div>
</div>
</body>
</html>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el:".book",
data:{
fontSize:16,
mode:'light', //light / dark 白天 和 晚上
showMenu:false //控制字体菜单显示与否
},
methods:{
toggleMode(){
this.mode = this.mode === 'light' ? 'dark' : 'light'
},
setFontSize(val){
this.fontSize = val;
}
},
})
</script>
1476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
