信息管理实践第十四周周记

最新推荐文章于 2024-07-05 02:51:26 发布

梦瑾い

最新推荐文章于 2024-07-05 02:51:26 发布

阅读量122

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Bili_Meng_Jin/article/details/118229680

版权

第十四周周记

知识点
- - Vue特性
网页展示
代码

知识点

Vue特性

Vue.js库的体积非常小的，并且不依赖其他基础库。对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用。

网页展示

学习过程大部分参考菜鸟教程，部分代码源于菜鸟教程。
在这里插入图片描述
在上面搜索框输入文字后：

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>LSQ尝试的搜索页面</title>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>  
        <style>
			body{
				background-color: lightblue;
				font:15px/1.3;
			}
		
            *{
                margin:0;
                padding:0;
            }

            .bar input{
                background:#fff no-repeat 13px 13px;
                border: none;
                width: 100%;
                padding: 15px;
                box-shadow: 0 8px 20px #c4c4c4 inset;
                text-align: left;
                font-size: 20px;
                font-weight: bold;
                text-indent: 10px;
            }

            ul{
                list-style: none;
                width: 100%;
                margin: 0;
                text-align: left;
            }

            ul li{
                border-bottom: 1px solid #ddd;
                padding: 10px;
                overflow: hidden;
            }

            ul li p{
                text-align: center;
                font-weight: bold;
                padding-top: 5px;
                color:#aa9626;
            }
        </style>
</head>
<body>
    <form id="main" v-cloak>
        <div class="bar">
            <input type="text" v-model="searchString" placeholder="在这里搜索" />
        </div>
        <ul>
            <li v-for="article in filteredArticles">
                <p>{{article.title}}</p>
            </li>
        </ul>
    </form>
    <script>
    var demo = new Vue({
        el: '#main',
        data: {
            searchString: "",
            articles: [
                {
                    "title": "lc今天抽到了三个白盒子，并折了十年寿命",
                },
                {
                    "title": "lc昨天也抽到了三个白盒子，替lsq折了十年寿命",
                },
                {
                    "title": "lc今天复习的很蕉绿，并且不想再复习了",
                },
                {
                    "title": "lsq今天睡了一下午，但还是很困",
                },
                {
                    "title": "lc给lsq左右环绕音播放自己的音乐黑历史",
                },
                {
                    "title": "今天公布摇号，lsq又没摇上号",
                }
            ]
        },
        computed: {
            filteredArticles: function () {
                var articles_array = this.articles,
                    searchString = this.searchString;
                if(!searchString){
                    return articles_array;
                }
                searchString = searchString.trim().toLowerCase();
                articles_array = articles_array.filter(function(item){
                    if(item.title.toLowerCase().indexOf(searchString) !== -1){
                        return item;
                    }
                })
                return articles_array;;
            }
        }
    });
    </script>
</body>
</html>