使用vue实现自定义搜索功能
生活随笔
收集整理的這篇文章主要介紹了
使用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: '<div class="group"> <div class="line"> <input type="button" name="name" value="新增一行" class="btnAddLine" v-on:click="addLine" /> <input type="button" name="name" value="新增一組" class="btnAddGroup" v-on:click="addGroup" /><input type="button" name="name" value="移除組" v-on:click="$emit(\'remove-group\',items.id)" v-if="items.id" /> </div> <div class="line" v-for="item of items.items" v-if="!item.relation"> <select> <option value="Id">編號</option> <option value="Name">姓名</option> <option value="Age">年齡</option> </select> <select> <option value="大于">大于</option> <option value="小于">小于</option> <option value="等于">等于</option> </select> <input type="type" name="name" value="" /> <input type="button" name="name" value="移除" class="btnRemoveLine" v-on:click="removeLine(item.id)" /> </div> <group v-bind:items="item" v-for="item of items.items" v-if="item.relation" v-on:remove-group="removeGroup"></group> </div>'});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>最終運行效果如下：
?
講解：
?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中提供了如下兩種方式
方式一：
<script type="text/x-template" id="group-template"><div>hello</div> </script> <script>var component = Vue.component("group", {template: '#group-template'}); </script>?
方式二：
<template id="group-template"><div>hello</div> </template> <script>var component = Vue.component("group", {template: '#group-template'}); </script>?
轉載于:https://www.cnblogs.com/duanjt/p/10706574.html
總結
以上是生活随笔為你收集整理的使用vue实现自定义搜索功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Deeplink（深度链接）唤起App，
- 下一篇： Linux系统挂起进程的几种方法