Filters 01. What isThe filter can perform necessary processing on the data we pass in and return the processing results.
export default { // Create local filters through filters filters:{ filter name(data){ // Process the incoming data and return the processing result} } } 02. How to do it (1) Define filters
Created through the filters structure export default { // Create local filters through filters filters:{ filter name(data){ // Processing return processing result} } }
Need to be defined before the Vue instance is created Vue.filter(filter name, (data) => { // do something return processing result}) Create a global filter in a separate file, import it into the component you need, and register it in filters import Vue from 'vue' // Create a global filter through Vue.filter const filter1 = Vue.filter(filter name, (data) => { // do something return processing result}) // Export export { filter1 } //In the component--introduce the filterimport { filter1 } from '@/utils/filters.js' export default { // Add filters to the filters in the component // Filters can both create filters and register filters // Only filters registered in filters are considered filters filters: { filter1 } } (2) Usage
<div> {{ data | filter }} </div>
The filter supports multiple parallel use, and the processing result of the former will be passed as the parameter of the latter. <div> {{ data | filter1 | filter2 }}</div> (3) Filter parameters
03. Encapsulate filter functions
// define function const filterA = () => {} const filterB = () => {} // Export function object export { filterA, filterB }
import * as filters from './filters.js' //Traverse the methods in filters.js Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) }) Custom directives 01. What is
02. Basic Concepts (1) Hook functionA directive definition object can provide the following hook functions (all optional):
(2) ParametersThe command hook function will be passed the following parameters:
// <div v-demo:left="100"></div> // The left here is the arg of the command's binding object // 100 is the value of the command's binding object Vue.directive('demo',{ // el--indicates the bound element, that is, the element where the instruction is placed bind(el,binding,vnode){ // You can directly process this element el.style.position = 'fixed'; const s = ( binding.arg == 'left' ? 'left' : top ); el.style[s] = binding.value + 'px'; } }) 03. Command registration (1) Global registrationRegister a global directive via Vue.directive(), which contains two parameters:
Vue.directive("directive name", { inserted: function(el){ // do something } }) (2) Local registrationRegister local custom directives by adding directives object data to the Vue instance export default { directives: { Command name: { function} } } The above is the detailed content of the use of vue filters and custom instructions. For more information about vue filters and custom instructions, please pay attention to other related articles on 123WORDPRESS.COM! You may also be interested in:
|
<<: MySQL 8.0.12 decompression version installation graphic tutorial under Windows 10
>>: Detailed explanation of the reasons and solutions for Docker failing to start normally
Table of contents General upload component develo...
<br />I have always believed that Yahoo'...
1. Install Docker yum install docker #Start the s...
Whether it is Samba service or NFS service, the m...
Effect Fading from top to bottom Source code html...
Using the html-webpack-plugin plug-in to start th...
1. Pull the image First, execute the following co...
The Linux seq command can generate lists of numbe...
Step 1. Enable MySQL slow query Method 1: Modify ...
There are two tables, and the records in table A ...
This article introduces Nginx from compilation an...
This article uses an example to describe how MySQ...
Border Style The border-style property specifies ...
Cause of failure Today, when I was writing a caro...
Docker runs multiple Springboot First: Port mappi...