<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
<input type="text" v-model="str">
<!-- <p>{{fn(str)}}</p>-->
<!-- <p>{{fn(str)}}</p>-->
<!-- <p>{{fn(str)}}</p>-->
<!-- <p>{{fn(str)}}</p>-->
<!-- <p>{{str.split("").reverse().join("")}}</p>-->
<!-- <p>{{str | reverStr}}</p>-->
<!-- <p>{{str | reverStr}}</p>-->
<!-- <p>{{str | reverStr}}</p>-->
<!-- <p>{{str | reverStr}}</p>-->
<!-- 以上方法每次都会执行 -->
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<p>{{comReverse}}</p>
<!-- 当成属性去使用,如果数据重复使用的话,computed只执行一次,只有当数据
发生改变的时候。computed才会再次执行 -->
</div>
</body>
<script>
new Vue({
el:"#root",
data:{
// 指定你的数据属性
str:"这里有一盘西瓜"
},
// 计算属性
computed:{
// 定义了一个名字为comReverse的计算属性
comReverse(){
// 结果
console.log(3333333);
return this.str.split("").reverse().join("");
//将字符串分割变成数组之后进行反转,在转为字符串
}
},
filters:{
reverStr(v){
console.log(2222222)
return v.split("").reverse().join("");
}
},
methods:{
// 指定方法
fn(v){
console.log(111111111)
return v.split("").reverse().join("");
}
},
mounted(){
// 当你的实例在页面当中挂载完毕之后会执行。
}
})
</script>
</html>
computed计算属性
最新推荐文章于 2022-07-08 14:28:25 发布