问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js怎么做到字符串和星号隐藏来回切换显示？

头像
chensvv
    12663259

    比如要在页面显示一个字符串
    abcdskldf-sdfljkjsjdfl-sdfdsfs
    隐藏显示后是：abcdskldf* <显示>（这是个按钮点击后变为隐藏）
    需求：点击显示按钮隐藏后的字符串展示回完整的状态，
    有大佬提供一下方便切换隐藏显示的思路吗

    javascripthtml5
    阅读 2.9k
    3 个回答
    得票最新
    头像
    (ಡωಡ)hiahiahia
      8331213
      ✓ 已被采纳
      原生js写法
      <html lang="en">
<body>
    <div id="cont">abcdskldf*</div>
    <button id="btn">显示</button>
    <script>
        let cont = document.getElementById('cont')
        let btn = document.getElementById('btn')
        btn.onclick = function () {
          cont.innerHTML = cont.innerHTML === 'abcdskldf*' ? 'abcdskldf-sdfljkjsjdfl-sdfdsfs' : 'abcdskldf*'
          btn.innerHTML = cont.innerHTML === 'abcdskldf*' ? '显示' : '隐藏'
        }
    </script>
</body>
</html>
      vue写法
      <template>
<div>
<div>{{cont}}</div>
<button @click="changeCont">{{statusTxt}}</button>
</div>
</template>

<script>
export default{
  data () {
    return {
      cont: 'abcdskldf*',
      statusTxt: '显示'
    }
  },
  methods: {
    changeCont () {
      this.cont = this.cont === 'abcdskldf*' ? 'abcdskldf-sdfljkjsjdfl-sdfdsfs' : 'abcdskldf*'
      this.statusTxt = this.cont === 'abcdskldf*' ? '显示' : '隐藏'
    }
  }
}
</script>
      头像
      凌览
        219626
        let isShow = true;
let str = 'abcdskldf-sdfljkjsjdfl-sdfdsfs';
const strSplitArray = str.split('-');
const onClick = ()=>{
    isShow = !isShow;
    str = isShow ? strSplitArray.join('-'):`${strSplitArray[0]}*`;
}

        点击时，触发onClick函数，str值即为abcdskldf-sdfljkjsjdfl-sdfdsfs或为abcdskldf*,按钮文案以isShow进行判断是展示显示还是隐藏

        头像
        三_清
          113513

          让你看不懂(≧▽≦)

          <!DOCTYPE html>
<html lang="en">

<body>
  <h2 id="e4e"></h2>
  <button id="btn"></button>
</body>
<script>
  const ele = document.querySelector('#e4e')
  const btn = document.querySelector('#btn')

  btn.addEventListener('click', (() => {
    const sourceStr = 'abcdskldf-sdfljkjsjdfl-sdfdsfs'
    const handledStr = `${sourceStr.slice(0, 9)}*`
    const btnBranch = ['隐藏', '显示']

    /** @params 判断是否显示 */
    let isShowFull = false

    // # 初始化数据
    ele.innerHTML = isShowFull ? handledStr : sourceStr
    btn.innerHTML = isShowFull ? btnBranch[1] : btnBranch[0]

    return function l({ target }) {
      isShowFull = !isShowFull
      ele.innerHTML = isShowFull ? handledStr : sourceStr
      btn.innerHTML = isShowFull ? btnBranch[1] : btnBranch[0]
    }
  })())

</script>

</html>
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题
          宣传栏