vue中如何让复选框选中内容变红色

在Vue中，如果你想让复选框选中时其文本内容变成红色，你可以通过CSS样式或者绑定一个自定义指令来实现。这里提供两种常见的方式：

1. **直接绑定CSS**:
首先，在你的CSS文件或`style`标签中定义一个`:checked`伪类选择器，当复选框选中时应用红色样式。例如：

   input[type="checkbox"]:checked + label {
       color: red;
   }

这里假设你的复选框标签旁边有一个label元素。

2. **使用自定义指令**:
如果你想在更复杂的场景下控制样式，可以创建一个自定义指令。首先，在Vue组件中定义这个指令，然后在模板上应用它：

   Vue.directive('red-checked', {
     update: function (el, binding) {
       el.classList.toggle('red-text', el.checked);
     }
   });

   <template>
     <input type="checkbox" v-red-checked />
     <label>我的复选框</label>
   </template>

   <script>
   // ... 然后在你的Vue实例中使用这个指令
   export default {
     directives: {
       redChecked
     }
   };
   </script>

   并在相应的CSS中添加`.red-text { color: red; }`