<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>插值语法实现名字案例</title>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div>欢迎来带{{name}}学习</div>
姓：<input type="text" v-model="firstName" /><br />
名：<input type="text" v-model="lastName" /><br />
全名：<span>{{firstName.slice(0,3)}}-{{lastName}}</span><br />
</div>
<!--如果firstName.slice(0,3) 处理名字的过多的话，有点问题-->
</body>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
name: "尚硅谷",
firstName: "张",
lastName: "三",
},
});
</script>
</html>