携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情
💛作者主页：静Yu
🧡简介：CSDN全栈优质创作者、华为云享专家、阿里云社区博客专家，前端知识交流社区创建者
💛社区地址：前端知识交流社区
🧡多种源码领取：各种福利满满
之前也介绍过很多vue相关的基础知识了，学习的目的主要是应用，学了再多也要多加练习，今天我们介绍的主要是一个小案例，非常简单。
达到的效果
达到的效果就是在文本框中分别输入姓和名之后，在全名部分自动显示。修改文本框中的内容，全名部分也会随之改变。
1.插值语法实现
利用v-model实现数据双向绑定，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
姓：<input type="text" v-model="firstname"><br>
名：<input type="text" v-model="lastname"><br>
全名：<span>{{firstname}}-{{lastname}}</span>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
firstname:'静',
lastname:'Yu'
}
})
</script>
</body>
</html>
此时我们就可以在文本框中随意修改文字了，还有一个新的需求就是，假设我们在文本框中输入了很长一段文字，但是我们只取其中的一部分。例如，我们只取前三位，实现方法就是用截取函数
slice(0,3)
比如，你截取firstname的前三位，全名部分代码如下
全名：<span>{{firstname.slice(0,3)}}-{{lastname}}</span>
2.methods实现
插值的内容是一个调用的函数，this指的是vue实例vm，return返回vue实例的firstname和lastname。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
姓：<input type="text" v-model="firstname"><br>
名：<input type="text" v-model="lastname"><br>
全名：<span>{{fullname()}}</span>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
firstname:'静',
lastname:'Yu'
},
methods: {
fullname(){
return this.firstname+'-'+this.lastname
}
},
})
</script>
</body>
</html>
