实现效果如&＃xff1a;http://www.ligerui.com/demos/filter/filter.htm
代码&＃xff1a;
<%&＃64; Page Language&＃61;"C#" AutoEventWireup&＃61;"true" CodeBehind&＃61;"WebForm2.aspx.cs" Inherits&＃61;"WebApplication1.WebForm2" %>DOCTYPE html><html xmlns&＃61;"http://www.w3.org/1999/xhtml">
<head runat&＃61;"server"><meta http-equiv&＃61;"Content-Type" content&＃61;"text/html; charset&＃61;utf-8" /><title>title><script src&＃61;"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&＃61;"app"><group v-bind:items&＃61;"items">group><input type&＃61;"button" name&＃61;"name" value&＃61;"获取值" v-on:click&＃61;"getValue" />form>
body>
html>
<script>var indexs &＃61; 1000;//定义一个组件,其实就是一组条件var component &＃61; Vue.component("group", {props: ["items"],data: function () {return {}},methods: {addLine: function (event) {indexs&＃43;&＃43;;this.items.items.push({id: indexs,column: "Id",local: "equal",value: "1"});},addGroup:function(){indexs&＃43;&＃43;;this.items.items.push({id: 0,relation: "and",items: []});},removeLine: function (id) {for (var i &＃61; 0; i < this.items.items.length; i&＃43;&＃43;) {if (this.items.items[i].id &＃61;&＃61;&＃61; id) {console.log(this.items.items[i]);this.items.items.splice(i, 1);break;}}},removeGroup: function (id) {for (var i &＃61; 0; i < this.items.items.length; i&＃43;&＃43;) {if (this.items.items[i].id &＃61;&＃61;&＃61; id) {console.log(this.items.items[i]);this.items.items.splice(i, 1);break;}}}},template: &＃39;
最终运行效果如下&＃xff1a;
讲解&＃xff1a;
1.经过分析&＃xff0c;这个功能涉及到递归功能&＃xff0c;于是我们拆分成了一个模块&＃xff0c;一个查询组就定义成一个自定义组件group。
2.自定义组件通过props定义父组件向子组件传递的值
3.通过$emit触发当前组件的事件&＃xff0c;并可以传递参数&＃xff0c;当前组件的父级组件将绑定该事件
4.v-on用于绑定事件&＃xff0c;v-for循环节点&＃xff0c;v-if判断为true才输出节点
5.data不能是对象&＃xff0c;只能是方法的返回&＃xff0c;因为页面会引用多个组件&＃xff0c;通过方法返回能确保数据的独立
6.关于在自定义组件的template中写入html代码看起来不友好的问题&＃xff0c;可以在网上搜索“vue x-template”进行修改。
二、关于template
如上&＃xff0c;组件中&＃xff0c;template写了很多html代码&＃xff0c;阅读起来很不方便&＃xff0c;然后vue中提供了如下两种方式
方式一&＃xff1a;
方式二&＃xff1a;
京公网安备 11010802041100号