Vue2. X basic knowledge Two data calculation

1, Filters Filter

Front end in the presentation of the back end of the data passed, often can not be directly displayed, need to undergo some conversion, such as the backend has a field is a DateTime format, to the front end will find a very strange string, this time, usually need to write a function to format, in Vue, We can use filter to add a function to format the output; Here we import renminbi, automatically converted to US dollar as demand. Examples are as follows:

<div id= "App" >
		<div v-once> today's exchange rate for CNY is: {{rates}}</div>
		<div>
			
 
 var app = new Vue ({el: "#app", data: {rate:6.3589, Exchange rate rmb:0,//RMB dollar:0//Mei DAO},//Filters Filter S: {formatprice: (price, RATE,ISRMB) = {&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NB sp;            //Unit                         
            		  let suffix = ' $ ';
            		if (!ISRMB) {suffix = ' &yen; ';
            		} else {rate = (1/rate). toFixed (4);
            	} return Parsefloat (price*rate). toFixed (2) + ' +suffix;
		}
            }
        }); 
 
Due to vue2. The filter in X can only be applied to {{}} and V-bind, so a property of the Vue instance is used in the v-html $options to use the filter, the output of the renminbi symbol, the effect is as follows:

2. Computed Calculation Properties

Computed is another way to process data, avoid adding the business logic of the process to the template, and ensure the structure of the template is clear and maintainable. Application scenario: When dealing with commodity prices, the backend defines the price as an integral type that is divided into units, avoiding problems when dealing with floating-point type data. The front-end needs to convert the price narimoto to show, if the price needs to be modified, then need to put the price of re-recovery points, and then passed to the backstage, very troublesome; let's use Vue's computed compute properties to see how we can easily solve this requirement:

. price {
		display:inline-block;
		Text-decoration:line-through;
	}
We imagine, here is the supermarket store tag, showing the original price, because the original price is not needed to change, so, here I used v-once to make the original value is always equal to cents (see the following JS code); The promotional price is the value we enter later, the value that needs to be passed to the backend We have bound an input event to input of the promotional price, the function that handles the event is defined in the GetValue () method in methods (see JS code below), and the current event object $event passed through;

 
<div id= "App" >
    	<div v-once>
    		: <div:class= "classname" >{{price}}</div>¥
    	</ Div>
    	<p> Sales Price: <input @input = "GetValue ($event)" name= "Sale"/></p>
    	<p> passed to background value: {{ Cents}}</p>
    </div>
 
At the time of initialization, we set two hooks function get and set to the price object of computed, and when the price is accessed, it calls its get hook function, returns the data in units to the front end, and when the value is set to price, it calls its set hook function. and converts the new value passed in to the cents in units of the assigned value;

var app = new Vue ({
            el: "#app",
            data: {
            	cents:100000,//back-end passed in ' cents ' unit of money
            	classname: ' Price '
            },< C5/>methods: {
            	getValue ($event) {
            		This.price = $event. Target.value | | 0;//When the value of input is null, set to 0
            	}
            },
            //real-time calculation  executes computed when the data changes
            : {price
            	: {
            		Set (newvalue) {
            			this.cents = parsefloat ( NewValue) * []
            		,
            		get () {
            			return (this.cents/100). toFixed (2);}}}
        );
 
When we enter the promotional price, the input event is triggered, the GetValue event handler is called, and the function gives price a new value that triggers the set hook function of price, so the cents is automatically converted to a new value that is divided into units, and the effect is as follows: