Vue2.0 的漫长学习ing-3-2
Posted 小凡的耿
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue2.0 的漫长学习ing-3-2相关的知识,希望对你有一定的参考价值。
computed Option 计算选项
computed 的作用主要是对原数据进行改造输出。改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="../assets/js/vue.js"></script> <title>Computed Option 计算选项</title> </head> <body> <h1>Computed Option 计算选项</h1> <hr> <div id="app"> {{newPrice}} </div> <script type="text/javascript"> var app=new Vue({ el:‘#app‘, data:{ price:100 }, computed:{ newPrice:function(){ return this.price=‘¥‘ + this.price + ‘元‘; } } }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>computed Option 计算选项</title> <script type="text/javascript" src="../assets/js/vue.js"></script> </head> <body> <h1>computed Option 计算选项</h1> <hr> <div id="app"> {{newPrice}} <ol> <li v-for="item in reverseList"> {{item.title}}-{{item.date}} </li> </ol> </div> <script type="text/javascript"> var newsList=[ {title:‘香港或就“装甲车被扣”事件追责 起诉涉事运输公司‘,date:‘2017/3/10‘}, {title:‘日本第二大准航母服役 外媒:针对中国潜艇‘,date:‘2017/3/12‘}, {title:‘中国北方将有明显雨雪降温天气 南方阴雨持续‘,date:‘2017/3/13‘}, {title:‘起底“最短命副市长”:不到40天落马,全家被查‘,date:‘2017/3/23‘}, ]; var app = new Vue({ el: "#app", data:{ price:100, newsList:newsList }, computed:{ newPrice:function(){ return this.price = "$" + this.price; }, reverseList:function(){ return this.newsList.reverse(); } } }) </script> </body> </html>
以上是关于Vue2.0 的漫长学习ing-3-2的主要内容,如果未能解决你的问题,请参考以下文章