14.Vue.js 小Demo

最新推荐文章于 2023-03-07 20:05:52 发布

VIVI读书吧

最新推荐文章于 2023-03-07 20:05:52 发布

阅读量174

点赞数

分类专栏： Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/vivian_1122/article/details/88755725

版权

Vue.js 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <title>列表展示删除添加</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
    <style>
        #app {
            width: 600px;
            margin: 20px auto;
        }
        
        .dv1,
        .dv2 {
            border: 1px solid black;
            margin-bottom: 10px;
            padding: 5px;
        }
        
        table {
            width: 600px;
            border-right: 1px solid black;
            border-top: 1px solid black;
        }
        
        .tb th {
            width: 600px;
            background-color: blue;
            color: white;
            border-bottom: 1px solid #000;
        }
        
        .tb th,
        .tb td {
            border-left: 1px solid black;
            border-bottom: 1px solid #000;
            text-align: center;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="dv1">
            编号：
            <input type="text" v-model="newId" id='inputId' ref='inputRefId' v-myfocus v-mycolor='color'> 品牌名称：
            <input type="text" v-model="newName">
            <input type="button" value="添加" @click='addData'>
        </div>
        <div class="dv2">
            品牌名称：
            <input type="text" placeholder="请输入搜索条件" v-model='searchVal'>

        </div>
        <div class="tb">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <tr v-for='(item,index) in newList' :key='index'>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <!-- 在需要过滤的数据后面加上管道符 |过滤器名称 -->
                    <td>{{item.ctime|fmtTime('/')}}</td>
                    <td><a href="#" @click='deleteData(index)'>删除</a></td>
                </tr>
                <tr v-if='list.length===0'>
                    <td colspan='4'>没有品牌数据</td>
                </tr>
            </table>
        </div>
    </div>
    <script>
        //通过Vue.filter()方法创建过滤器，它有两个参数，第一个参数是过滤器的名字，第二个参数是过滤器的处理函数，
        //这个处理函数有个默认的参数，表示需要过滤的数据

        //创建一个时间过滤器fmtTime
        Vue.filter('fmtTime', function(time, seprator) {
            var y = time.getFullYear();
            var m = time.getMonth() + 1;
            var d = time.getDate();
            return y + seprator + m + seprator + d

        })

        //这里实际上创建的是v-myfocus指令
        Vue.directive('myfocus', {
                //inserted钩子函数，它表示自定义指令插入到标签中的时候就执行
                //inserter钩子函数有两个参数（el,bingding) el表示使用自定义指令的元素，binding表示自定义指令的信息
                inserted(el, binding) {
                    el.focus();
                }
            })
            //创建是的v-mycolor='color'指令
        Vue.directive('mycolor', {
            inserted(el, binding) {
                //binding.value可以获取传入自定义指令中的属性的值
                el.style.color = binding.value
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                newId: '',
                newName: '',
                color: 'red',
                searchVal: '',
                list: [{
                    id: 1,
                    name: '宝马',
                    ctime: new Date()
                }, {
                    id: 2,
                    name: '奔驰',
                    ctime: new Date()
                }, {
                    id: 3,
                    name: '大众',
                    ctime: new Date()
                }, {
                    id: 4,
                    name: '海马',
                    ctime: new Date()
                }, ]
            },
            // mounted() {
            // document.getElementById('inputId').focus()原生js方式实现的
            //通过this.$refs.ref的值--来获取dom
            // this.$refs.inputRefId.focus()
            // },
            methods: {
                deleteData(idx) {
                    this.list.splice(idx, 1)
                },
                addData() {
                    this.list.push({
                        id: this.newId,
                        name: this.newName,
                        ctime: new Date()
                    })
                }

            },
            computed: {
                newList() {

                    return this.list.filter(value => value.name.indexOf(this.searchVal) !== -1)
                }
            }
        })
    </script>
</body>

</html>

VIVI读书吧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
14.Vue.js 小Demo

<!DOCTYPE html><html lang="en"><head> <title>列表展示删除添加</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...
复制链接

扫一扫