vue单选按钮 按钮格式为图片

vue中不使用`<input type="radio"/>`实现单选 多个选项

html部分

<ul>
        <li v-for="(item,index) in arr" :key="item.id" @click="chooseClick(index)">
          <span>
            <img v-if="item.isChoose" src="./img/choose.png" alt />
            <img v-else src="./img/chooseno.png" alt />
          </span>
          <span>{{item.title}}</span>
        </li>
</ul>

js部分

data() {
    return {
      n: 6,
      arr: [
        { id: "1", title: "选项1", isChoose: false },
        { id: "2", title: "选项2", isChoose: false },
        { id: "3", title: "选项3", isChoose: false },
        { id: "4", title: "选项4", isChoose: false },
        { id: "5", title: "礼", isChoose: false },
        { id: "0", title: "其他问题", isChoose: false }
      ],
      imgarr: []
    };
  },
  methods:{
      chooseClick(index) {
      //选择问题类型
      for (let i = 0; i < this.arr.length; i++) {
        if (index == i) {
        	//选中之后可以进行取消
          // this.arr[index].isChoose = !this.arr[index].isChoose;
          //选中之后不可取消  必须有一个是选中的
          this.arr[index].isChoose = true;
          this.n = index;
        } else {
          this.arr[i].isChoose = false;
        }
      }
    },
.questionType {
  font-size: 0.14rem;
  text-align: left;
  padding: 0.1rem 0.15rem;
  padding-bottom: 0rem;
  box-sizing: border-box;
  p {
    letter-spacing: 1px;
    font-size: 0.14rem;
    padding-bottom: 0.15rem;
    box-sizing: border-box;
  }
  ul {
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    li {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 0.1rem 0rem;
      padding-left: 0.1rem;
      box-sizing: border-box;
      border-top: 1px solid #ccc;
      span:nth-child(1) {
        display: block;
        margin-right: 0.1rem;
        img {
          width: 0.12rem;
          height: 0.12rem;
          vertical-align: middle;
        }
      }
      span:nth-child(2) {
        font-size: 0.12rem;
        color: #777;
      }
    }
  }
}


猜你喜欢

转载自blog.csdn.net/weixin_46023188/article/details/106720074