This is the 12th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021
Watch Listening property
This property is used to monitor changes to data and trigger the corresponding callback function execution.
Basic usage Adds the Watch property with the value of an object. The property name of the object is the data to monitor, and the value of the property is the callback function, which is triggered whenever the value of the property name changes.
The callback takes two arguments:
-
NewVal, the value of the changed data.
-
OldVal, the value before the data changed.
counter
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div>Counter {{shu}}</div>
<span>Before changing: {{ov}}</span>
<span>{{nv}}</span>
<br />
<button @click="shu++">Gal.</button>
</div>
<script>
var vm = new Vue({
el: '#app'.data: {
shu:1.ov:0.nv:0
},
methods:{
}
})
vm.$watch("shu".function(nval,oval){
vm.$data.ov = oval
vm.$data.nv = nval
})
</script>
</body>
</html>
Copy the codeAdd a listener and assign the value before the counter change to ov and the value after the change to nv
vm.$watch("shu",function(nval,oval){
vm.$data.ov = oval
vm.$data.nv = nval
})
Copy the code
The shopping cart
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<tr>
<th>The serial number</th>
<th>Name of commodity</th>
<th>Commodity prices</th>
<th>Purchase quantity</th>
<th>operation</th>
</tr>
<tr v-for="sp in sps">
<td>{{ sp.id }}</td>
<td>{{ sp.name }}</td>
<td>{{ sp.money }}</td>
<td>
<button v-on:click="sp.sum=sp.sum-1">-</button>
{{ sp.sum }}
<button v-on:click="sp.sum=sp.sum+1">+</button>
</td>
<td>
<button v-on:click="sp.sum=0">reset</button>
</td>
</tr>
</table>
<div >{{getManey ()}}</div>
</div>
<script>
var vm = new Vue({
el: '#app'.data: {
sps:[
{
id:1.name:13 "apple".money:6000.sum:1
},
{
id:2.name:"Apple 12".money:5000.sum:1
},
{
id:3.name:11 "apple".money:4000.sum:1}},methods: {getmaney:function(){
var m=0;
for(var x=0; x<this.sps.length; x++){ m=m+this.sps[x].money*this.sps[x].sum;
}
returnm; }}})</script>
</body>
</html>
Copy the code
Figure out the total cost
getmaney:function(){ var m=0; for(var x=0; x<this.sps.length; x++){ m=m+this.sps[x].money*this.sps[x].sum; } return m; }Copy the codeSelect all and deselect all
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" id="a" value="a" v-model="che"/>
<label for="a">a</label>
<input type="checkbox" id="b" value="b" v-model="che"/>
<label for="b">b</label>
<input type="checkbox" v-model="checked" id="bok" v-on:change="ckall()" />
<label for="box">select all</label>
</div>
<script>
var vm = new Vue({
el: '#app'.data: {
checked:false.che: [].shuzu: ["a"."b"]},methods: {ckall:function(){
// Select all
if(this.checked){
this.che = this.shuzu
}else{
// Deselect all
this.che=[]
}
}
},
watch: {"che":function(){
// Check whether all are selected
if(this.che.length == this.shuzu.length){
this.checked=true
}else{
this.checked=false}}}})</script>
</body>
</html>
Copy the code
Calculate attribute
computed
Features:
- Define methods for calculating properties in a computed property object, using {{method name}} on the page to display the computed results.
- Display and monitor property data through getters/setters.
- The computed properties are cached, and the getter is executed only once for multiple reads.
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ mess }}</p>
<p>{{ remess }}</p>
<p>{{ mess.split('').reverse().join('') }}</p>
</div>
<script>
var vm = new Vue({
el: '#app'.data: {mess:'abcd'
},
computed: {
remess:function(){
return this.mess.split(' ').reverse().join(' ')}}})</script>
</body>
</html>
Copy the code
methods
Computed is based on its dependency cache and revalues only when the dependency changes. With methods, functions are always called again when rendering again.
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="mess" />
<p>{{ mess }}</p>
<p>{{ remess }}</p>
<p>{{ remess2() }}</p>
</div>
<script>
var vm = new Vue({
el: '#app'.data: {mess:'abcd'
},
computed: {
remess:function(){
return this.mess.split(' ').reverse().join(' ')}},methods: {
remess2:function(){
return this.mess.split(' ').reverse().join(' ')}}})</script>
</body>
</html>
Copy the code
setter
When the page gets some data, it will look in data first, and if it can’t find it, it will look in computing properties. When it gets data in computing properties, it will automatically execute get method, and it also provides set method. Computed properties have only getters by default, but you can provide a setter if you need one.
<! DOCTYPEhtml>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ site }}</p>
</div>
<script>
var vm = new Vue({
el: '#app'.data: {
name: 'xiaowang'.cls:'01'
},
computed: {site: {get: function(){
return this.name+' '+this.cls
},
set: function(Value){
var names = Value.split('|')
this.name = names[0]
this.cls = names[1]
}
}
}
})
vm.site = 'xiaowang|01';
document.write('name:'+vm.name);
document.write('<br>');
document.write('class:'+vm.cls);
</script>
</body>
</html>
Copy the code