使用 v-if 时啥都不显示

Posted 2023-02-23

【中文标题】使用 v-if 时啥都不显示

【英文标题】：Nothing is displayed when using v-if使用 v-if 时什么都不显示

【发布时间】：2021-01-16 04:04:30

【问题描述】：

我正在使用 Vue.js 框架制作一个小型原型应用程序，但遇到了问题。 我想始终显示带有显示按钮的输入字段，但有条件地显示一些文本。听起来很简单，但当我尝试这个时，它只显示一个空白页。这是我的组件代码：

<template>
  <div class="box">
    <input v-model="password" :type = "show === false ? 'text' : 'password'" placeholder="Password">
    <button type="button" @click="show = ! show">Show</button>

    Your password was scored  strengthPercentage %

        <div v-if="strengthLevel === 1">Your password is very easy to guess. Add some more characters.</div>
        <div v-if="strengthLevel === 2">Your password is not very strong. Add some variations.</div>
        <div v-if="strengthLevel === 3">Your password is quite good. You could still use some more variations though</div>
        <div v-if="strengthLevel === 4">Your password is strong enough. Feel free to use it!</div>
  </div>
</template>

<script>
export default 
name: "PasswordField",

  data: function() 
  return 
    password : '',
    show : false,
  
  ,

  computed: 
      strengthPercentage() 
        let score = 0;
        if(this.password == "") return score; 

        for(let i = 0; i<this.password.length; i++)
          if(i<7) 
            score += 5;
           if(i<9)
            score += 2;
          
        

        let variations = 
          digits: /\d/.test(this.password),
          lowercase: /[a-z]/.test(this.password),
          uppercase: /[A-Z]/.test(this.password),
          special: /\W/.test(this.password)
        

        let variationCount = 0;
        for(let check in variations)
          if(variations[check] === true) variationCount++; 
        

        score += (variationCount - 1) * 10;
        if(score>100) score = 100;
        return Math.ceil(parseInt(score));
  ,

    strengthLevel()
        let percentage = this.strengthPercentage();
        if(percentage < 30)  return 1; 
        if(percentage < 60)  return 2; 
        if(percentage < 80)  return 3; 
        else  return 4; 
    
  

</script>

<style scoped>
</style>

有什么想法吗？

【参考方案1】：

如果您查看浏览器控制台，您会看到以下错误消息：

[Vue 警告]：渲染错误：“TypeError: this.strengthPercentage is not a function”

那指向：

export default 
  computed: 
    strengthPercentage() ...,
    strengthLevel() 
      let percentage = this.strengthPercentage(); // Error: 'this.strengthPercentage' is not a function
    
  

虽然计算的 props 被声明为函数，但它解析为一个 getter，因此您可以将它作为一个简单的属性来访问：

// BEFORE:
// let percentage = this.strengthPercentage();

// AFTER:
let percentage = this.strengthPercentage;

demo

【参考方案2】：

您需要格式化您的代码 替换

 <input v-model="password" :type = "show === false ? 'text' : 'password'" placeholder="Password">
<button type="button" @click="show = ! show">Show</button>

有

<input  :type="show==false ? 'password' : 'text'" placeholder="" v-model="password" name="password">
<button type="button" @click="show=!show">Show</button>

示例代码片段

var app = new Vue(
  el: "#app",
  data () 
    return 
      show: false,
      password: '',
    
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="box" id="app">
    <input  :type="show==false ? 'password' : 'text'" placeholder="" v-model="password" name="password">
    <button type="button" @click="show=!show">Show</button>

 </div>

【参考方案3】：

您应该使用show 作为计算数据，并且您希望显示的文本为data。因此，您可以使用方法更改该数据。您忘记在方法中定义您的函数strengthLevel。

我会向你推荐这些阅读：

https://michaelnthiessen.com/vue-props-vs-data/ VueJs, difference between computed property and watcher?

这里给你一个代码的想法：https://gist.github.com/andersonbosa/6651d9e8bb89e2c9a0bccf8a257f7be5