Vue学习之计算属性实例
方法/步骤
1
打开WebStorm开发工具，新建‘test.html’文件，在文件同个目录内放入vue.js文件，并引入到页面。
2Title
在页面的body标签内添加div标签，写代码测试字符串分割，输出分割后的第一组元素，代码如下;
{{msg.split(',')[0]}}
3
打开网页，查看效果如下图
4Title
上面的代码虽然能实现效果但是并不优雅，使用计算属性改写代码如下：
{{splitStr}}
5
打开网页，查看效果如下图，依然达到了效果，默认计算属性有getter，可以返回计算后的值
6Title 这里实现点击button后赋值给计算属性，计算属性掉setter方法，在最后显示时会调用getter
为计算属性添加setter方法，便于更改用于计算的值，代码如下：
{{splitStr}}
7
打开网页，点击按钮后查看效果如下图，成功更改了输出的内容
下一篇：Firework拼图教程