直播平台搭建源码，实现密码的显示与隐藏功能

实现思路

1.首先我们要先在data中定义一个变量用来控制小图标的显示与隐藏；

2.在页面中循环遍历data中的privates(密钥内容)，拿到字符串的长度length；

3.拿到密钥的长度后，先把它分割成字符串数组，用于后面插入；

4.然后通过splice方法插入到字符串数组中，splice有三个参数，第一个参数是必要的，是插入元素的位置，第二个参数的意思是要插入的元素数量，第三个参数的意思是要插入的元素是什么；

5.最后我们将字符串数组通过join方法转换成字符串即可。

<br><template><br>    <div class="private"><br>        <!--// 显示内容: ==0时显示*，==1时显示密钥内容 --><br>        <span v-if="codeType == 1">{{privates}}</span><br>        <span class="special" v-if="codeType == 0">{{star}}</span><br>        <!--// 小图标: ==0时展示隐藏图标，==1时展示显示图标--><br>        <span v-if="codeType == 1"><img @click="reveal" src="https://s4.ax1x.com/2022/01/07/79E7dg.png"></span><br>        <span v-if="codeType == 0"><img @click="conceal" src="https://s4.ax1x.com/2022/01/07/79EOWn.png"></span><br>    </div><br></template><br><script><br>    export default {<br>        data() {<br>            return {<br>                privates: "dhwiglfliagw5f34a1w3w54f", //密钥内容<br>                codeType: 0, //控制密钥显示隐藏 等于1时显示，等于0时隐藏<br>                star: "", //要插入的星星*<br>            }<br>        },<br>        mounted() {<br>            // 循环遍历拿到密钥的长度<br>            for (var i = 0; i < this.privates.length; i++) {<br>                let star = this.star.split('') //分割成字符串数组<br>                star.splice(i, i, '*') //添加到数组<br>                this.star = star.join('') //将数组转换为字符串<br>            }<br>        },<br>        methods: {<br>            //显示事件<br>            reveal() {<br>                this.codeType = 0<br>            },<br>            //隐藏事件<br>            conceal() {<br>                this.codeType = 1<br>            },<br>        }<br>    }<br></script><br><style scoped><br>    .private {<br>        display: flex;<br>        align-items: center;<br>    }<br>    .private img {<br>        width: 20px;<br>        height: 20px;<br>        vertical-align: middle;<br>        cursor: pointer;<br>        margin-left: 9px;<br>    }<br>    .special {<br>        position: relative;<br>        top: 4px;<br>    }<br></style>

以上就是直播平台搭建源码，实现密码的显示与隐藏功能，更多内容欢迎关注之后的文章