Vue模板字符串内能否使用v-bind实现响应式绑定？

不行，你没法在模板字符串里使用v-bind指令——Vue不会解析这类动态生成的HTML字符串里的Vue指令。这些字符串最终只会被当作普通HTML插入到DOM中，:src会被浏览器识别成一个名为:src的普通属性，根本不会触发Vue的响应式绑定逻辑，这就是你的绑定不生效的原因。

解决办法一：直接拼接计算后的图片路径 #

你的contains_eight_characters等计算属性已经通过require返回了具体的图片路径，所以可以直接把这些值拼接进HTML字符串里，利用计算属性的响应式特性自动更新：

修改你的passwordAssistant计算属性：

passwordAssistant() {
  return `<ul style="list-style: none;">
  <li> <img src="${this.contains_eight_characters}">8 characters</li>
  <li> <img src="${this.contains_number}">1 number</li>
  <li> <img src="${this.contains_uppercase}">1 upper case</li>
  <li> <img src="${this.contains_lowercase}">1 lower case</li>
  <li> <img src="${this.contains_special_character}">1 special character</li>
  </ul>`
}

这样当modelValue变化时，依赖的计算属性会更新，passwordAssistant也会重新生成包含最新图片路径的HTML字符串，v-tooltip就能显示正确的图片了。

解决办法二：用虚拟节点（VNode）生成内容（更推荐） #

如果你的v-tooltip组件支持接收VNode（比如大部分现代Vue tooltip库都支持），可以用Vue的h函数（createElement）来构建虚拟节点，这样就能完全使用Vue的响应式绑定能力：

首先导入h函数（Vue 3/2写法略有不同）：

// Vue 3
import { h } from 'vue'
// Vue 2
import Vue from 'vue'
const h = Vue.createElement

然后修改passwordAssistant：

passwordAssistant() {
  return h('ul', { style: { listStyle: 'none' } }, [
    h('li', null, [
      h('img', { src: this.contains_eight_characters }),
      '8 characters'
    ]),
    h('li', null, [
      h('img', { src: this.contains_number }),
      '1 number'
    ]),
    h('li', null, [
      h('img', { src: this.contains_uppercase }),
      '1 upper case'
    ]),
    h('li', null, [
      h('img', { src: this.contains_lowercase }),
      '1 lower case'
    ]),
    h('li', null, [
      h('img', { src: this.contains_special_character }),
      '1 special character'
    ])
  ])
}

这种方式不仅能实现响应式绑定，还能灵活添加其他Vue特性（比如事件、指令），是更符合Vue开发习惯的做法。

小提示 #

你的contains_eight_characters计算属性里有个拼写错误：this.modalValue应该是this.modelValue，这个错误会导致长度判断失效，记得修正哦。

内容的提问来源于stack exchange，提问作者Subjugation