Vue.js枫桥夜泊

Lzzy Vue.js枫桥夜泊

效果图

枫桥夜泊效果展示图

代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟古诗垂直显示文本</title>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
    <div v-bind:style="[baseStyle, fontStyle, styleRadius]">
        <h4>枫桥夜泊</h4>
        <p>
            月落乌啼霜满天，<br>江枫渔火对愁眠。<br>姑苏城外寒山寺，<br>夜半钟声到客船。
        </p>
    </div>
</div>
<script type="text/javascript">
var vm = new Vue({
    el:'#example',
    data:{
        width : 400,
        margin : '10px auto',
        padding : 30,
        bgcolor : 'lightblue',
        family : "华文楷体",
        fontSize : 36,
        color : 'green',
        align : 'center',
        border : '1px solid #CCCCCC',
        boxShadow : '3px 3px 6px #999999',
        mode : 'vertical-rl',//垂直方向自右而左的书写方式
    },
    computed: {
        baseStyle: function () {//基本样式
            return {
                width: this.width + 'px',
                margin: this.margin,
                padding: this.padding + 'px',
                'background-color': this.bgcolor
            }
        },
        fontStyle: function(){//字体样式
            return {
                'font-family': this.family,
                fontSize: this.fontSize + 'px',
                color: this.color,
                'text-align': this.align
            }
        },
        styleRadius: function () {
            return { 
                border: this.border,//边框样式
                'box-shadow': this.boxShadow,//边框阴影
                'writing-mode': this.mode//书写方式
            }
        }
    }
})
</script>
​
​
</body>
​
</html>
​
​
​
​

 

posted @ 2022-04-10 19:58  梅七  阅读(367)  评论(0)    收藏  举报