Vue的过滤器

最新推荐文章于 2024-02-20 00:00:00 发布

L＆wy

最新推荐文章于 2024-02-20 00:00:00 发布

阅读量80

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_44719554/article/details/108773789

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在Vue.js中创建一个简单的页面，动态地将输入文本转化为首字母大写的格式，并通过CSS实现了一个带有圆角、阴影效果的蓝色背景文字展示区。示例中使用了数据绑定、过滤器和CSS样式来增强用户体验。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        #app{
            padding:52px;

        }
        .banner{
            width: 600px;
            height: 150px;
            border-radius: 20px;
            box-shadow: 5px 5px 10px #888888;
            font-size: 32px;
            font-weight: bolder;
            text-align: center;
            line-height: 150px;
            background-color: blueviolet;
            color: cornsilk;
            margin:0px auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="banner">
            {{ text | a }}
        </div>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                text:"actions speak louder than words."
            },
            // 定义过滤器
            filters:{
                a:function(val){
                    var strs=val.split(" ")
                    var result="";
                    for (var index = 0; index < strs.length; index++) {
                        result+=strs[index].charAt(0).toUpperCase()+strs[index].substring(1)+"";          
                    }
                    return result;
                }
            },
        })
    </script>
</body>
</html>

L＆wy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的过滤器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../vue.js"></scrip
复制链接

扫一扫

专栏目录