Vue类绑定如何与字符串配合使用？消除未定义属性警告

Absolutely! You can use string literals directly in Vue's class binding expressions—your first approach is actually the correct way to do it. Let's break down why your initial setup might not have seemed to work, and fix the warning from your second attempt.

Why Your First Example Didn't Apply the Class #

Looking at your code:

<div :class="{open: target == 'myString'}"></div>
<script>
var app = new Vue({
  el: '#app', // Don't forget to mount your app to a DOM element!
  data: {
    target: null // This is currently null, so the comparison evaluates to false
  }
})
</script>

The expression target == 'myString' is completely valid, but since your target data property is set to null, it evaluates to false—so the open class won't be added. If you update target to 'myString' (like running app.target = 'myString' in your browser console), the class will apply automatically.

Also, note that I added the el option to the Vue instance—this is a common oversight, and your app won't render properly without mounting it to an existing element on the page.

Why You Got the Warning in the Second Example #

When you removed the quotes around myString:

<div :class="{open: target == myString}"></div>

Vue interprets myString as a reactive data property (not a string literal), so it looks for this property in your Vue instance's data, methods, or computed properties. Since you didn't define it in the data option, you saw this warning:

[Vue warn]: Property or method "myString" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

This is expected behavior—Vue is letting you know it can't find the property you're referencing. To fix this, either add quotes around 'myString' to treat it as a literal, or define myString in your data if you intended it to be a dynamic value.

Correct Usage Examples #

Here are a few clear ways to use string literals in Vue class bindings:

1. Direct String Comparison (Your Original Idea) #

<div :class="{active: currentView === 'dashboard'}"></div>
<script>
new Vue({
  el: '#app',
  data: {
    currentView: 'dashboard' // This will trigger the 'active' class
  }
})
</script>

2. Combine with Dynamic Values #

You can mix string literals with dynamic logic using template literals too:

<div :class="`card ${isSelected ? 'selected-card' : 'default-card'}`"></div>

3. Object Syntax with String Class Names #

If you want to apply a class whose name is a string literal, this works too:

<div :class="{'error-state': hasValidationError}"></div>

Key Takeaway #

Always wrap string literals in single or double quotes inside Vue template expressions. Without quotes, Vue will treat the identifier as a property on your Vue instance, leading to warnings if it's not defined.

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