Vue.js使用细节一:什么时候取值必须带()/不能带()
2019-03-26 11:44
120 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_38994419/article/details/88816494
注:案例均采用了菜鸟教程的教学案例 (附地址:http://www.runoob.com/vue2/vue-start.html )
案例1
<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { site: "菜鸟教程", url: "www.runoob.com", alexa: "10000" }, methods: { details: function() { return this.site + " - 学的不仅是技术,更是梦想!"; } } }) </script>
运行结果:
解析:此处在取用details的值时必须带上(),因为取用的是details函数的返回值。如果不带(),会将details后面的函数内容当作字符串输出!!!
运行结果如下:
案例2:
<div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Runoob!' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) </script>
运行结果:
解析:在这里需要注意的是函数是在computed节点下,这里会在执行完当前函数之后将值赋值给reversedMessage这个变量,所以用{{}}取值时不能带上()。如果带上(),程序执行会直接报错。
运行结果如下:
相关文章推荐
- 使用v-html解决Vue.js渲染过程中html标签不能被解析(html标签显示为字符串)
- vue 使用screenfull.js,全屏时不能监控到esc
- 使用v-html解决Vue.js渲染过程中html标签不能被解析(html标签显示为字符串)
- Firefox下使用JS解决不能submit的方法
- .“在JAVA中,异常子类必须在它们任何父类之前使用,因为运用父类的catch语句将捕获该类型及其所有子类类型的异常。这样,后面运行子类的catch语句将永远不会到达。而且,Java中不能到达的代码是一个错误。”
- Vue.js-----轻量高效的MVVM框架(十一、使用slot分发内容)
- 【Vegas原创】访问owa,图片和js脚本不能正常显示和使用的解决方法
- 【Vegas原创】访问owa,图片和js脚本不能正常显示和使用的解决方法
- 北京市工作居住证官方网站js报错不能使用解决办法
- 使用 Vue.js 制作一个简单的调查问卷平台
- 使用JS让一般人不能复制你的劳动成果
- 使用js判断文本框不能输入空格
- js 只能输入英文和数字,且首位必须是字母,字母总数不能超过3个,总长度不能超过20!
- 在SAP中进行黏贴时必须要把之前的数据删掉后才能黏贴,不能直接使用黏贴来覆盖之前的数据,这个怎麼解?
- . 有一个一维数组,里面存储整形数据,请写一个函数,将他们按从大到小的顺序排列,要求执行效率高,并说明如何改善执行效率(该函数必须自己实现,不能使用php函数)。
- 4、vue.js的使用
- js判断价格,必须为数字且不能为负数的实现方法
- vue.js学习 自定义过滤器使用(1)
- t:jscookMenu t:panelNavigation2 及 t:jscookMenu不能够使用action跳转
- C函数printf中不能使用%lf,而用%f输出double,而函数scanf却必须用%lf来输入double