gitHub Address : https://github.com/lily1010/vue_learn/tree/master/lesson05

One Custom filter ( Registered in Vue overall situation )

matters needing attention :

(1) The global method Vue.filter() Register a custom filter , Must be on Vue Instantiate before

(2)  The filter function always takes the value of the expression as the first parameter . Quoted arguments are treated as strings , Parameters without quotation marks are evaluated as expressions

(3) You can set two filter parameters , The premise is that there is no conflict between the two filters

(4) User from input The input data is sent back to model You can deal with it before

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue Custom filter </title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div class="test">
<p>{{message | sum}}</p>
<p>{{message | cal 10 20}}</p> <!-- The filter function always takes the value of the expression as the first parameter . Quoted arguments are treated as strings , Parameters without quotation marks are evaluated as expressions .-->
<p>{{message | sum | currency }}</p> <!-- Add two filters , Be careful not to conflict --> <input type="text" v-model="message | change"> <!-- User from input The input data is sent back to model You can deal with it before --> </div>
<script type="text/javascript"> // ----------------------------------------- Gorgeous split line ( from model->view)---------------------------------------
Vue.filter("sum", function(value) { // The global method Vue.filter() Register a custom filter , Must be on Vue Instantiate before
return value + 4;
}); Vue.filter('cal', function (value, begin, xing) { // The global method Vue.filter() Register a custom filter , Must be on Vue Instantiate before
return value + begin + xing;
}); // ----------------------------------------- Gorgeous split line ( from view->model)---------------------------------------
Vue.filter("change", {
read: function (value) { // model -> view Updating `<input>` Format value before element
return value;
},
write: function (newVal,oldVal) { // view -> model Format the value before writing it back
console.log("newVal:"+newVal);
console.log("oldVal:"+oldVal);
return newVal;
}
}); var myVue = new Vue({
el: ".test",
data: {
message:12
}
}); </script>
</body>
</html>

Two   Custom filter ( Register inside the instantiation )

The above example is registered directly in Vue On the whole , Other instances that don't use this filter will also be forced to accept , In fact, the filter can be registered inside the instance , Register only in instances that use it

The above program is rewritten as :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue Custom filter </title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div class="test">
<p>{{message | sum}}</p>
<p>{{message | cal 10 20}}</p> <!-- The filter function always takes the value of the expression as the first parameter . Quoted arguments are treated as strings , Parameters without quotation marks are evaluated as expressions .-->
<p>{{message | sum | currency }}</p> <!-- Add two filters , Be careful not to conflict --> <input type="text" v-model="message | change"> <!-- User from input The input data is sent back to model You can deal with it before --> </div>
<script type="text/javascript">
Vue.filter("change", {
read: function (value) { // model -> view Updating `<input>` Format value before element
return value;
},
write: function (newVal,oldVal) { // view -> model Format the value before writing it back
console.log("newVal:"+newVal);
console.log("oldVal:"+oldVal);
return newVal;
}
}); var myVue = new Vue({
el: ".test",
data: {
message:12
},
filters: {
sum: function (value) {
return value + 4;
},
cal: function (value, begin, xing) {
return value + begin + xing;
}
}
}); </script>
</body>
</html>

vue.js Study Custom filters use (2) More articles about

  1. vue.js Study Custom filters use (1)

    In this tutorial , We'll go through a few examples , Understanding and learning VueJs Filter . We refer to some perfect filters , such as orderBy and filterBy. And we can chain call filters , One filter after another . therefore , We can decide ...

  2. Vue.js Study Item14 – Filters and custom filters

    Basics Similar to custom instructions , You can use the global approach  Vue.filter()  Register a custom filter , It takes two parameters : filter ID  And filter functions . The filter function takes a value as an argument , Returns the converted value : Vue.filter('re ...

  3. vue.js Learning record

    vue.js Learning record The article has synced my github note https://github.com/ymblog/blog, Welcome to add star~~ vue example Life cycle beforeCreate: Cannot access thi ...

  4. Vue.js Study - Component registration and use

    Vue.js Learning documents   Address :https://cn.vuejs.org/v2/guide/ About custom component registration : It is suggested that <script></script> Put it in body After tag H ...

  5. Vue.js Learning notes (2)vue-router

    vue in vue-router Use :

  6. vue.js Learning notes 3——TypeScript

    Catalog vue.js Learning notes 3--TypeScript Tools The base type Array Tuples enumeration Literal Interface Class types Class type elements function Function parameter this Objects and types heavy load iterator Symbol.iterat ...

  7. vue.js Learning materials

    vue.js Study VuejsAPI course https://vuejs.org.cn/guide/Vuejs Your own build tools http://www.jianshu.com/p/f8e21d87a572 How to use v ...

  8. Vue.js Learning notes : Element in and template Use in v-if Instructions

    f Instructions The grammar is relatively simple , Go straight to the code : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  9. vue.js learning better-scroll Failed to initialize encapsulated carousel graph

    vue.js learning better-scroll Failed to initialize encapsulated carousel graph Question 1 :slider Component initialization failed reason : It's slow for pages to get data asynchronously , Lead to slider After initialization , The data is not yet available , The picture has not been loaded yet Resolver ...

Random recommendation

  1. A hub hub、 Switch switch、 Router router The difference between

    Link to the original text :http://blog.csdn.net/thq0201/article/details/7782319 The first said HUB, That's the hub . Its function can be simply understood as connecting some machines to form a local area network ...

  2. Let all browsers include IE6 It supports both maximum width and minimum width .

    Let all browsers include IE6 It supports both maximum width and minimum width . _height  _width: in the light of ie6 css hack .yangshi{max-width:620px;min-width:1px;_wi ...

  3. bootStrap-1

    bootstrap What is it? ? 1. Simple and flexible, can be used to build popular user interface and interactive excuse Html.css/javascript Toolset . 2. be based on html5.css3 Of bootstrap, It has a lot of attractive properties : Amicable ...

  4. C# Realize the real printable area drawing without physical margin \ Print program development

    Often in the development of practical applications , Need to use graphics drawing and printing programs . How to realize the complete accurate printing and drawing needs to pay attention to many details . Recently, when I encountered printing problems , Study carefully for a while , Summarize this blog post , It's a little messy , It's hard to read . The base ...

  5. Ubuntu Common command arrangement

    Recently started to use Ubuntu The system , All kinds of commands are very unskilled , I want to collect , For future reference , Use this frequently updated essay 1.Ubuntu Setting and modifying user passwords Set up ROOT Password method :sudo passwd root , And then enter the secret ...

  6. MySQL Password lost , resolvent

    my MySQ The installation path is :D:\Program Files\MySQL 1. So first cmd Lower cutting plate Input -> D: Input ->cd "D:\Program Files\MySQL\My ...

  7. Python Use virtualenvwrapper Installing a virtual environment

    Loaded on https://www.jianshu.com/p/9f47a9801329 Python Use virtualenvwrapper Installing a virtual environment Tim_Lee  Focus on 2017.05.04 2 ...

  8. iOS One of the dependency library management tools Carthage

    stay iOS In development , We often use CocoaPods To manage the dependency Library .CoaoaPods It's a total solution , We are  Podfile  Specify the third-party library we need in , then CocoaPods It will be downloaded , Integrate ...

  9. delegate() Event binding Event delegation

    Definition and Usage delegate() Method is the specified element ( A child element of the selected element ) Add one or more event handlers , And specify the functions to run when these events occur . Use delegate() Method for the current or future ...

  10. 《Java Programming 》 The first 15 Weekly classroom practice summary

    <Java Programming > The first 15 Weekly classroom practice summary Practice one Textbook code checking -p242 requirement stay IDEA Run in or on the command line P242 StackTraceDemo2.java Is the code running consistent with the textbook ? Why? ...