vue计算属性前沿篇用{{}}和method实现_姓名案例

 当输入框内的东西改变时全名后面的内容也立马发生改变

用三种方式编写

1.用{{}}实现

 

双向绑定

v-model或着v-model:valiue 

拼接：

 

第一个框不论写多长全名框只显示前三个

slice(0,3)表示截取0到3不包括3即0 1 2索引的字符

但这样违背了模板中简单的表达式的原则

 

 用methods实现

如果直接写fullname则会把函数展现到页面上

 

 所以得加()才能显示return的值

 在绑定事件（）加不加无所谓

但在插值语法（{{}}）中不加（）表示把fullname这个函数插入加了（）表示.把调用的返回值插入

实现： 

原理：

当data中的发生变化时,vue的模板会重新加载进行阅读一遍 

在vue模板遇到插值方法则会帮你重新调用一遍

 但用methods写有小问题效率不高