动态绑定图片URL地址显示。

<img :src="imgURL" style="width: 25px;height: 25px; "/></span>

 <img :src="more ? up : down " alt="">

点击按钮,切换向上向下的箭头图标(图片),主要应用于,文字太长,省略号显示,点击箭头展开文字与收起文字功能。

<template>
    <div @click="change">
     <!-- 点击按钮,切换两个图片 -->
      <img :src="more ? up : down " alt="">
    </div>
</template>
<script>
  // 下面是导入两张图片的相对地址
  import up from '../static/icon/up.png'
  import down from '../static/icon/down.png'
  export default {
   
    data () {
      return {
        more: false,
        up: up,
        down: down,
      }
    },
    methods: {
      change() {
        this.more = !this.more
      }
    }
  }
</script>
Logo

前往低代码交流专区

更多推荐