Vue学习之计算属性实例
1、打开WebStorm开发工具，新建‘test.html’文件，在文件同个目录内放入vue.js文件，并引入到页面。<script type="text/javascript" src = "vue.js"></script>
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>
3、打开网页，查看效果如下图
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>
5、打开网页，查看效果如下图，依然达到了效果，默认计算属性有getter，可以返回计算后的值
6、为计算属性添加setter方法，便于更改用于计算的值，代码如下：<!DOCTYPE html>&造婷用痃lt;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
7、打开网页，点击按钮后查看效果如下图，成功更改了输出的内容
