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
If the words in the sql statement conflict with t...
Use HTML to write a dynamic web clock. The code i...
If you have installed the Win10 system and want t...
There is a new build tool in the Vue ecosystem ca...
In Vue, we generally have front-end and back-end ...
It is too troublesome to find the installation tu...
"/" is the root directory, and "~&...
Introduction to Vue The current era of big front-...
This article shares the specific code of JS to ac...
<br />A contradiction arises. In small works...
MySQL Installer provides an easy-to-use, wizard-b...
Solution-1: Download the msvcr100.dll file (find ...
1. Install Apache $ sudo apt update && su...
This article example shares the specific code of ...
question: The following error occurred when insta...