methods实现

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script type="text/javascript" src="../js/vue.js"></script><title>Document</title></head><body><div id="root">姓: <input type="text" v-model="firstName" /> 名:<input type="text" v-model="lastName" /> 姓名:<!-- <span>{{firstName.slice(0,3)}}-{{lastName.slice(0,10)}}</span> --><span>{{fullName()}}</span></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止vue在启动时生成生产提示new Vue({el: '#root',data: {firstName: '张',lastName: '三',},methods: {fullName() {console.log('@---')return (this.firstName.slice(0, 3) +'-' +this.lastName.slice(0, 10))},},})</script>
</html>

测试演示

计算属性实现

源码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script type="text/javascript" src="../js/vue.js"></script><title>Document</title></head><body><div id="root">姓: <input type="text" v-model="firstName" /> 名:<input type="text" v-model="lastName" /> 姓名:<span>{{fullName}}</span><br /><br /></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止vue在启动时生成生产提示const vm = new Vue({el: '#root',data: {firstName: '张',lastName: '三',},computed: {fullName: {//当有人读取fullName时，get就会被调用，且返回值就作为fullName的值//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时get() {console.log('get被调用')// 这里的this指的是vmreturn this.firstName + '-' + this.lastName},//get什么时候调用？当fullName被修改时set(value) {console.log('set', value)const arr = value.split('-')this.firstName = arr[0]this.lastName = arr[1]},},},})</script>
</html>

测试演示

讲师笔记

计算属性（简写源码）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><script type="text/javascript" src="../js/vue.js"></script><title>Document</title></head><body><div id="root">姓: <input type="text" v-model="firstName" /> 名:<input type="text" v-model="lastName" /> 姓名:<span>{{fullName}}</span><br /><br /></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止vue在启动时生成生产提示const vm = new Vue({el: '#root',data: {firstName: '张',lastName: '三',},computed: {// fullName: {//   get() {//       console.log('get被调用')//       // 这里的this指的是vm//       return this.firstName + '-' + this.lastName//   },//    set(value) {//      console.log('set', value)//       const arr = value.split('-')//       this.firstName = arr[0]//      this.lastName = arr[1]//   },// },fullName() {console.log('get被调用了')return this.firstName + '-' + this.lastName},},})</script>
</html>

思考

什么时候使用fullName 什么时候使用 fullName（）

Vue - 姓名案例相关推荐

Vue一个案例引发「内容分发slot」的最全总结
今天我们继续来说说 Vue,目前一直在自学 Vue 然后也开始做一个项目实战,我一直认为在实战中去发现问题然后解决问题的学习方式是最好的,所以我在学习一些 Vue 的理论之后,就开始自己利用业余时间做 ...
vue小案例（小黑记事本和购物车）
vue小案例小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...
Vue小案例1：计数器
Vue小案例1:计数器 html页面: 准备两个按钮分别绑定两个事件对应加减add,sub:还有一个span容器放置数据,样式自己写没有太大要求 <div id="app"& ...
分析初识vue小案例
前言我们已经写好了一个案例:初识vue小案例接下来我们就分析初识vue小案例容器和vue实例是一一对应的! 容器和vue实例应该是一一对应的,不允许出现一对一或者一对多下面是一个一个容器对多个 ...
Vue基础案例（水果搜索，购物车，todolist,留言板，跑马灯)
Vue基础案例(水果搜索,购物车,todolist,留言板,跑马灯) 01.水果搜索案例思路以及运用知识点通过computed计算 keyword与list ,算出findlist 如果list中 ...
前端vue入手案例--记事本
分享一个用vue做的一个案例,这个案例结合了大多的vue的入门知识,包括有点击事件,数据双向绑定,v-for获取数据列表,v-if 页面元素显示方法等等. 学习这个案例也是能很好的帮助vue的学习者掌 ...
【Vue】基础系列（八）数据绑定以及姓名案例的三种写法
和阿牛一起冲Vue
案例：后台管理案例(VUE路由案例)
目录 1. 素材下载: 2. 案例效果 3. 案例用到的知识点 4. 案例各个部分的实例代码(这里只提供修改的代码) 项目目录: 路由模块index.js部分: main.js部分: App.vue部 ...
vue实战案例：用学过的知识做一个小demo
学过了前面11个章节的知识,可以说你已经对vue2.0的基础知识有了一定程度的掌握,虽然在真正开发过程中,一些知识的使用会稍有不同,但是别慌,我们会把那部分内容在进阶系列,比如:单文件组件,过渡效果, ...

Vue - 姓名案例

文章目录

methods实现

源码

测试演示

计算属性实现

源码

测试演示

讲师笔记

计算属性（简写源码）

思考

Vue - 姓名案例相关推荐

最新文章

热门文章