uni-app/vue 如何在标签属性中使用data内容？（怎么写？）

Question

如题，
我是从小程序转而学习uni-app和vue.js的。像现在我想实现一个显示隐藏密码的功能，我原来在微信小程序上是直接指定input的password的值

<input password="{{!showPassword}}" ... />

我吧这个方法挪到uniapp上，写为

<input password="!showPassword" ... />
<p>显示密码？{{!showPassword}}</p>

后面这个 <p> 标签是为了测试直观点。测试的结果是input框状态没有变化，反而是 <p> 标签中的结果有变化也不知道是为啥……不过如果我要单独给写一个函数就可以……

<input password="getInputState()" .../>
<script>
//.....
data(){
  return {
     showPassword: false,
  }
},
getInputState(){
  return showPassword ? 'false' : 'true';
}
</script>

虽然这样的确可以正确变换状态，但是这样写未免有点太不够优（简）雅（单）了……

另外，当我想图片也根据状态显示在小程序上可以这样写

<image src="./{{showPassword ? 'hide.png' : 'show.png' }}" />

这种情况在uni-app中又该怎么写呢？

烦请大家不吝赐教，谢谢！

Answer 1

uni-app的语法和vue一致，除了部分不兼容

<!-- 注意password前面有个: -->
<input :password="!showPassword" ... />
<p>显示密码？{{!showPassword}}</p>

vue参数相关文档在这里：https://cn.vuejs.org/v2/guide...

-------- 分割线 --------

<!-- 可以这样写 -->
<image :src="showPassword ? 'hide.png' : 'show.png'" />