使用vue实现自定义搜索功能

实现效果如:http://www.ligerui.com/demos/filter/filter.htm

代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>

DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <style>
        .group {
            border: 1px solid gray;
            padding: 10px;
            margin: 10px;
        }
    style>
head>
<body>
    <form id="app">
        <group v-bind:items="items">group>
        <input type="button" name="name" value="获取值" v-on:click="getValue" />
    form>
body>
html>
<script>
    var indexs = 1000;
    //定义一个组件,其实就是一组条件
    var component = Vue.component("group", {
        props: ["items"],
        data: function () {
            return {
            }
        },
        methods: {
            addLine: function (event) {
                indexs++;
                this.items.items.push({
                    id: indexs,
                    column: "Id",
                    local: "equal",
                    value: "1"
                });
            },
            addGroup:function(){
                indexs++;
                this.items.items.push({
                    id: 0,
                    relation: "and",
                    items: []
                });
            },
            removeLine: function (id) {
                for (var i = 0; i < this.items.items.length; i++) {
                    if (this.items.items[i].id === id) {
                        console.log(this.items.items[i]);
                        this.items.items.splice(i, 1);
                        break;
                    }
                }
            },
            removeGroup: function (id) {
                for (var i = 0; i < this.items.items.length; i++) {
                    if (this.items.items[i].id === id) {
                        console.log(this.items.items[i]);
                        this.items.items.splice(i, 1);
                        break;
                    }
                }
            }
        },
        template: '
' }); var app = new Vue({ el: "#app", data: { items: { id: 0, relation: "and", items: [{ id: 1, column: "Id", local: "equal", value: "1" }, { id: 2, column: "Id", local: "equal", value: "1" }, { id: 3, relation: "and", items: [{ id: 4, column: "Id", local: "equal", value: "1" }] }] } }, methods: { getValue: function () { console.log(this.items); } } }); script>

最终运行效果如下:

使用vue实现自定义搜索功能_第1张图片

 

讲解:

 1.经过分析,这个功能涉及到递归功能,于是我们拆分成了一个模块,一个查询组就定义成一个自定义组件group。

 2.自定义组件通过props定义父组件向子组件传递的值

 3.通过$emit触发当前组件的事件,并可以传递参数,当前组件的父级组件将绑定该事件

 4.v-on用于绑定事件,v-for循环节点,v-if判断为true才输出节点

 5.data不能是对象,只能是方法的返回,因为页面会引用多个组件,通过方法返回能确保数据的独立

 6.关于在自定义组件的template中写入html代码看起来不友好的问题,可以在网上搜索“vue x-template”进行修改。

 

二、关于template

如上,组件中,template写了很多html代码,阅读起来很不方便,然后vue中提供了如下两种方式

方式一:


 

方式二:


 

转载于:https://www.cnblogs.com/duanjt/p/10706574.html

你可能感兴趣的:(使用vue实现自定义搜索功能)