Preface
This article will learn the basic usage of filters in vue (only applicable to vue2)
Filter
Filters are functions provided by vue for developers and are often used for text formatting. It can be used in two places: interpolation expression and v-bind attribute binding.
Private filter
Used in interpolation expressions
<p>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{message | capital }}</p>Example of usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic use of filters</title>
</head>
<body>
<div >
<p>{{message | capital }}</p>
</div>
<!-- Development environment version，Contains helpful command line warnings -->
<script src="/npm/vue/dist/"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello Xiaobai! '
},
// Definition filters must be in filters filters: {
// The val in the filter parameter is the value before the pipe character capital(val) {
// String charAt(0) method, take the corresponding index value ((0))
// toUpperCase const first = (0).toUpperCase()
// slice specifies the index to be intercepted back const other = (1)
// The filter must have a return value return first + other
}
}
})
</script>
</body>
</html>
v-bind attribute binding
<input type="text" v-bind:placeholder="message|capital">
Example of usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic use of filters</title>
</head>
<body>
<div >
<input type="text" v-bind:placeholder="message|capital">
</div>
<!-- Development environment version，Contains helpful command line warnings -->
<script src="/npm/vue/dist/"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello Xiaobai! '
},
// Definition filters must be in filters filters: {
// The val in the filter parameter is the value before the pipe character capital(val) {
// String charAt(0) method, take the corresponding index value ((0))
// toUpperCase const first = (0).toUpperCase()
// slice specifies the index to be intercepted back const other = (1)
// The filter must have a return value return first + other
}
}
})
</script>
</body>
</html>
Global filter
Use() to define a global filter; receive two parameters: the first global filter name, the second global filter processing function
Example of usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic use of filters</title>
</head>
<body>
<div >
<p>{{message | capital }}</p>
</div>
<div >
<input type="text" v-bind:placeholder="message|capital">
</div>
<!-- Development environment version，Contains helpful command line warnings -->
<script src="/npm/vue/dist/"></script>
<script>
// Use() to define a global filter; receive two parameters: the first global filter name, the second global filter processing function ('capital', function (val) {
// String charAt(0) method, take the corresponding index value ((0))
// toUpperCase const first = (0).toUpperCase()
// slice specifies the index to be intercepted back const other = (1)
// The filter must have a return value return first + other
})
const app = new Vue({
el: '#app',
data: {
message: 'hello Xiaobai! '
}
})
const app2 = new Vue({
el: '#app2',
data: {
message: 'hello sea! '
}
})
</script>
</body>
</html>
This is the end of this article about the detailed explanation of how to use Vue filters. For more related Vue filter content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!