Vue技术—姓名案例

本文主要是介绍Vue技术—姓名案例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

姓名案例_插值语法实现

<div id="root"><!--姓：<input type="text" v-model:value="firstname"/><br/>名：<input type="text" v-model:value="lastname"/><br/>全名：<span>{{ firstname + '-' + lastname}}</span>-->姓：<input type="text" v-model="firstname"/><br/>名：<input type="text" v-model="lastname"/><br/>全名：<span>{{ firstname.slice(0,3) }} - {{ lastname }}</span>
</div>

<script>
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
new Vue({el:"#root",data:{firstname:'张',lastname:'三'}
})
</script>

姓名案例_methods实现

<div id="root">姓：<input type="text" v-model:value="firstname"/><br/>名：<input type="text" v-model:value="lastname"/><br/>全名：<span>{{fullname()}}</span>
</div>

<script>
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
new Vue({el:"#root",data:{firstname:'张',lastname:'三'},methods:{fullname(){return this.firstname + '-' + this.lastname}}
})
</script>

这篇关于Vue技术—姓名案例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---