現在有這樣一個業務，有兩個輸入框，當向第一個輸入框輸入中文的時候，下面的輸入框實時展現中文拼音首字母大寫的拼接形式，即簡碼
實現的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 引入element-ui的css -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
#app {
padding: 0 400px;
}
</style>
</head>
<body>
<div id="app">
<el-input v-model="content.chinese" placeholder="請輸入中文"></el-input>
<el-input v-model="content.shortCode" ></el-input>
</div>
</body>
<!-- 引入vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入element-ui的js -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入pinyin.js -->
<script src="./pinyin.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
content: {
chinese: '',//中文
shortCode: ''//簡碼
}
}
},
// 采用watch監聽第一個輸入框的輸入，並把輸入的內容轉化成簡碼
watch: {
'content.chinese': {
handler() {
this.content.shortCode = pinyin.getCamelChars(this.content.chinese)
}
},
},
})
</script>
</html>
pinyin.js源碼鏈接：https://www.cnblogs.com/jiangxiaobo/p/6605696.html