计算属性的使用
<div id="app">
<h2>您的firstname:{{firstName}}</h2>
<h2>您的lastname:{{lastName}}</h2>
<h2>您的fullname是从计算属性中得到:{{fullName}}</h2>
<h2>您的fullname是从方法中得到:{{getFullName()}}</h2>
</div>
<script>
const vm = new Vue({
el:'#app',
data(){
return {
firstName:'zhang',
lastName:'san'
}
},
methods:{
getFullName(){
return this.firstName + this.lastName
}
},
computed:{//计算属性 一定要有一个返回值 在页面中渲染时是不需要加小括号的
fullName(){
return this.firstName + this.lastName
}
}
})
</script>
计算属性复杂使用
<div id="app">
<h2>您的总价:{{totalPrice}}</h2>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
books: [{
id: 110,
name: "JavaScript从入门到入土",
price: 119
},
{
id: 111,
name: "Java从入门到放弃",
price: 80
},
{
id: 112,
name: "编码艺术",
price: 99
},
{
id: 113,
name: "代码大全",
price: 150
},
]
}
},
computed: {
/* totalPrice() {
let total = 0
for (let i = 0; i < this.books.length; i++) {
total += this.books[i].price
}
return total
} */
//多种实现的方法
/* totalPrice() {
let total = 0
for (let index in this.books) {
total += this.books[index].price
}
return total
} */
/* totalPrice() {
let total = 0;
for(let item of this.books){
total += item.price
}
return total
} */
/* totalPrice() {
let total = 0;
this.books.forEach(item=>{
total += item.price
})
return total
} */
/* map */
/* totalPrice() {
let total = 0;
this.books.map(item=>{
total += item.price
})
return total
} */
/* filter */
/* totalPrice() {
let total = 0;
this.books.filter(item=>{
total += item.price
})
return total
} */
/* reduce */
/* totalPrice() {
return this.books.reduce((total,item)=>{
return total + item.price
},0)
} */
/* totalPrice() {
return this.books.reduce((total,item)=>total + item.price,0)
} */
/* some */
totalPrice() {
let total = 0;
this.books.some(item=>{
total += item.price
})
return total
}
}
})
</script>
计算属性中的getter和setter
<div id="app">
<input type="text" v-model="firstName"/>
<input type="text" v-model="lastName"/>
<input type="text" v-model="fullName"/>
<!-- v-model实现数据的双向绑定 -->
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
firstName: 'zhang',
lastName: 'san'
}
},
computed: { //计算属性 一定要有一个返回值 在页面中渲染时是不需要加小括号的
/* fullName(){
return this.firstName + this.lastName
} */
fullName: {
get: function() {
return this.firstName +','+ this.lastName
},
set:function(val){
console.log(val);
var list = val.split(',')
console.log(list);
this.firstName = list[0]
this.lastName = list[1]
}
}
}
})
</script>
watch侦听器
<div id="app">
<h3>{{firstName}}</h3>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
firstName: "zhang",
lastName: "san",
watchFullName: "zhangsan",
age: 18,
}
},
watch: {
/* firstName(newval,oldval){//监听器中有两个参数 一个是newval新的值 一个是oldval是老值
console.log(newval);
console.log(oldval);
} */
firstName: "change"
},
methods: {
change(newval, oldval) {
console.log(newval);
console.log(oldval);
}
}
})
</script>
深度侦听
<div id="app">
<p>FullName: {{person.fullname}}</p>
<p>FirstName: <input type="text" v-model="person.firstname"></p>
</div>
<script>
const vm = new Vue({
el: '#app',
data() {
return {
person: {
firstname: 'Menghui',
lastname: 'Jin',
fullname: ''
}
}
},
watch: {
/* fullname(newval,oldval){
console.log(newval);
console.log(oldval);
} */
/* person(newval,oldval){
console.log(newval);
console.log(oldval);
} */
person:{
handler(n,o){
console.log(n);
console.log(o);
this.person.fullname = n.firstname + this.person.lastname
},
immediate:true,//刷新即加载
deep:true//深度监听
}
}
})
</script>