<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>compute、watch的使用</title>
<script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
table,td{
border: 1px solid red;
table-layout: fixed;
text-align: center;
}
div {
line-height: 40px;
font-size: 25px;
}
</style>
</head>
<body>
<div id="app">
<div>{{ num }}</div>
<div>getFullName:(){{ getFullName() }}</div>
<div>fullName:{{ fullName }}</div>
<div>otherName:{{ otherName }}</div>
<!-- <div>getFullName{{ getFullName }}</div>-->
<button v-on:click=" num++ ">add</button>
<button v-on:click=" firstName+=num ">change</button>
<button v-on:click=" changeFullName() ">changeFullName</button>
<button v-on:click=" changeOtherName() ">changeOtherName</button>
<table>
<caption>演员表</caption>
<thead>
<tr>
<td>序号</td>
<td>姓名</td>
<td>性别</td>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in getPersons()">
<td>{{index}}</td>
<td>{{ item.name }}</td>
<td>{{ item.sex }}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
num: 0,
color: "red",
phone: "HuaWei",
firstName: "Wei",
lastName: "tieJi",
person: [
{
name:"刘德华",
sex:"男"
},
{
name:"王菲",
sex:"女"
}
]
},
methods: {
getFullName: function () {
let randomStr = Math.random()*10;
return this.firstName +randomStr + this.lastName;
},
getPersons: function () {
let name = Math.floor(Math.random()*10);
let sex = "男";
if(name > 4){
sex = "女";
}
let newData = {
name:"刘德华"+name,
sex:sex
};
let data = [
{
name:"刘德华",
sex:"男"
},
{
name:"王菲",
sex:"女"
}
]
data.push(newData);
return data;
},
changeFullName(){
this.fullName= "刘德华";
},
changeOtherName(){
this.otherName = "abcde";
}
},
/*
* computed 计算属性
* 1、利用函数来生成一个新的属性(记住:生成的是属性不是方法)
* 2、computed属性有依赖缓存:只有生成该属性的方法里的属性值(来源于data中的数据)发生改变,才会执行属性对应的方法;不发生改变从缓存中取值
* 3、不接受传入参数,数据都是从data中获取
* 4、通过get和set函数来对生成的新属性进行获取和赋值
* -- get用来获取值
* */
computed: {
fullName: {
get: function () {
// alert("执行get方法");
return this.firstName + this.lastName;
},
set: function (val) {
// alert("执行set方法"+val);
this.firstName=val.charAt(0);
this.lastName =val.split("").splice(1).toString();
}
},
// fullName: function () {
// let randomStr = Math.random()*10;
// return this.firstName +randomStr + this.lastName;
// },
/**
* split方法将字符串分割为数组,当传递为空字符串时,将字符窜分割为单个字符的字符数组
* 字符串可以直接调用其下标来获取对应的字符值
*
* splice方法是数组的方法,非常有意思
* let val = 'abcde;
* eg: let middle = val.split("");
* middle为数组,middle.splice(2)造成的结果是middle被分割,middle值为剩下来的部分,而
* middle.splice(1)则是截取的部分,返回值类型也是数组
* 这样的话 var jieQuBuFen=middle.splice(2); jieQuBuFen为数组['c','d','e'];而middle则变为['a','b']
* 所以很有意思,java中的数组没有这样的方法
*/
otherName:{
get: function(){
// alert("执行get方法");
return this.firstName + this.lastName;
},
set: function(val){
console.log(val+"==val-other");
// alert("执行set方法"+val);
let middle = val.split("");
// console.log("middle");
// console.log(middle);
// let jieQuBuFen = middle.splice(2);
// console.log("jieQuBuFen");
// console.log(jieQuBuFen);
// console.log("middle截取后剩下");
// console.log(middle);
this.lastName = middle.splice(2).toString()
console.log("lastName==="+this.lastName)
this.firstName = middle.toString();
console.log("firstName==="+this.firstName)
}
}
}
})
</script>
</html>
computed、watch以及字符串和数组
最新推荐文章于 2024-01-09 16:00:59 发布