html - Routerlink isExactActive 更改图像 Vue

Question

有没有办法做这样的事情：

<router-link to="/">
        <img src=" :active = isExactActive ? pic_active.png : pic_inactive.png}}" /> //Somethink like this
        <div class="text">Home</div>
</router-link>

Img src 应该取决于链接是否完全处于活动状态。如果活动 pic_active 应该显示，如果不是活动 pic-inactive 应该显示。我怎样才能使这项工作？我是 vue 的初学者，我一直在寻找几个小时......

谢谢！

Answer 1

有多种方法可以做到这一点，但我建议要么使用计算属性（https://vuejs.org/v2/guide/computed.html）来包含源，比如

<router-link to="/">
        <img src="{{ imageLink }}" /> <!-- Something like this -->
        <div class="text">Home</div>
</router-link>

// your component
export default {
   computed: {
       imageLink: isExactActive ? 'pic_active.png' : 'pic_inactive.png',
   }
}

或使用 v-if ( https://vuejs.org/v2/guide/conditional.html )：

<router-link to="/">
        <img v-if="isExactActive" src="pic_active.png" />
        <img v-else src="pic_inactive.png" /> <!-- Something like this -->
        <div class="text">Home</div>
</router-link>