Vue学习之计算属性实例

2025-12-22 06:50:31

1、打开WebStorm开发工具，新建‘test.html’文件，在文件同个目录内放入

vue.js文件，并引入到页面。

Vue学习之计算属性实例

2、在页面的body标签内添加div标签，写代码测试字符串分割，输出分割后的第一组元素，代码如下;

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src = "vue.js"></script>
<title>Title</title>
</head>
<body>
<div id ="app">
<h2>{{msg.split(",")[0]}}</h2>
</div>
<script>
var vue = new Vue({
el : "#app",
data :{
msg:"hello,world",
},
})
</script>
</body>
</html>

Vue学习之计算属性实例

3、打开网页，查看效果如下图

Vue学习之计算属性实例

4、上面的代码虽然能实现效果但是并不优雅，使用计算属性改写代码如下：

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src = "vue.js"></script>
<title>Title</title>
</head>
<body>
<div id ="app">
<h2>{{splitStr}}</h2>
</div>
<script>
var vue = new Vue({
el : "#app",
data :{
msg:"hello,world",
},
computed:{
splitStr(){
return this.msg.split(",")[0]
}
}
})
</script>
</body>
</html>

Vue学习之计算属性实例

5、打开网页，查看效果如下图，依然达到了效果，默认计算属性有getter，可以返回计算后的值

Vue学习之计算属性实例

6、为计算属性添加setter方法，便于更改用于计算的值，代码如下：

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src = "vue.js"></script>
<title>Title</title>
</head>
<body>
<div id ="app">
<h2>{{splitStr}}</h2>
<button v-on:click="clickHandler">点我更改值</button>
</div>
<script>
var vue = new Vue({
el : "#app",
data :{
msg:"hello,world",
},
methods: {
clickHandler() {
this.splitStr = "world,hello";
}
},
computed:{
splitStr:{
get:function () {
return this.msg.split(",")[0];
},
set:function (newValue) {
this.msg = newValue;
}
}
}
})
</script>
</body>
</html>

这里实现点击button后赋值给计算属性，计算属性掉setter方法，在最后显示时会调用getter

Vue学习之计算属性实例

7、打开网页，点击按钮后查看效果如下图，成功更改了输出的内容

Vue学习之计算属性实例

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。