VUE 基础理解 data method el

23 篇文章 0 订阅
15 篇文章 0 订阅
<div id="vue">
    <h1>test: {{site}}</h1>
    <h1>url: {{url}}</h1>
    <h1>函数{{details()}}</h1>
</div>
<script type="text/javascript">
var data = {
    site: 'test',
    url: 'http://www.baidu.com',
    }
var vm = new Vue({
    el: '#vue',
    data,
methods: {
    details: function(){
        return `${this.site}1123`
    }
}

})
</script>

`

vue构造器中有个el的参数,它是 DOM 元素中的 id,在上面实例中id 为 vue :
意味着接下来 div 中的改动全部在以上指定的 div 内,外部不收影响.
data 用于定义属性
methods 用于定义函数
{{}} 用于输出对象属性和函数返回值

`

document.write(vm.$data === data) // true document.write(vm.$el === document.getElementById('vue')) // true

vue提供实例属性和方法,前缀$,用来区分用户定义的属性

Vue中,使用Element UI的`el-table`组件进行多个条件的查询通常涉及到数据过滤和动态渲染。Element的`el-table-column`允许你设置`filters`属性来实现列级别的过滤,而`filter-method`则提供了自定义过滤逻辑的能力。以下是一个简单的例子,展示如何在`el-table`中进行多个条件的查询: ```html <template> <el-table :data="tableData" @filter-change="handleFilterChange" > <el-table-column prop="name" label="Name" filterable filter-method="filterByName" /> <el-table-column prop="age" label="Age" filterable filter-method="filterByAge" /> <!-- 添加其他列... --> </el-table> </template> <script> export default { data() { return { tableData: [ { name: 'Alice', age: 20 }, { name: 'Bob', age: 30 }, // 更多数据... ], filters: {}, // 存储当前的过滤条件 }; }, methods: { handleFilterChange(field, value) { this.filters[field] = value; // 更新过滤条件 this.$refs.table.filter(); // 调用表格的过滤方法 }, filterByName(row) { // 按照name字段的值过滤 return row.name.includes(this.filters.name); }, filterByAge(row) { // 按照age字段的值过滤 return row.age === parseInt(this.filters.age); }, }, }; </script> ``` 在这个例子中,`handleFilterChange`方法监听`el-table`的过滤事件,当用户输入新的过滤条件时,它会更新`filters`对象并调用表格的过滤方法。`filterByName`和`filterByAge`是自定义的过滤方法,分别处理`name`和`age`列的过滤逻辑。 相关问题: 1. `filter-method`属性作用是什么? 2. 如何在Vue中为el-table的每一列都添加过滤功能? 3. 如果我想实现更复杂的过滤条件,比如组合条件或动态条件,应该如何扩展?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值