注释掉 Vue 模板元素的一部分

Posted 2023-02-21

【中文标题】注释掉 Vue 模板元素的一部分

【英文标题】：Comment out a part of Vue template element

【发布时间】：2018-06-02 18:20:59

【问题描述】：

有时需要注释掉某些元素属性而不必记住它，以便在一些测试后快速恢复它。

使用 html 注释语法可以注释掉整个元素

<div>
    <!-- <h2>Hello</h2> -->
    <span>hi</span>
</div>

但是这不适用于单个属性（导致渲染错误）

<my-comp id="my_comp_1"
         v-model="value"
         <!-- :disabled="!isValid" -->
         @click="handleClick">
</my-comp>

我之前看到和使用过的最好方法是通过复制整个元素和设置v-if="false" 来制作标签备份（或注释掉整个复制的元素）并继续尝试原始元素

【问题讨论】：

我同意这很有用。这是不可能的。模板语法和 HTML 标记之间已经存在差异，例如区分大小写和结束标签。允许<!-- -->（以及更方便的// 和/* */）样式的cmets 在开始标签内将非常方便。

【参考方案1】：

我得到了这些解决方案。我想到了解决方案1。

起始代码：

<div 
v-for="foo in foos" 
:key="foo.id" 
@click="foo.on = !foo.on /* javascript comment. */"
>
  <label>
     foo.name  foo.on
  </label>
</div>

需要禁用的Vue指令HTML属性：@click="foo.on = !foo.on"

最终的 div 标签将如何运行：

<div 
v-for="foo in foos" 
:key="foo.id" 
>

解决方案 1 和 2 将 disabled 属性保留在其标记内。我没有找到制作“原始字符串”的好方法。要将属性保留在标签中，外引号和内引号必须不同。

溶胶。 1：我做了一个新的v-bind属性（:lang）把disabled属性放进去。

:lang='en  /* @click="foo.on = !foo.on" */'

溶胶。 2：选择一个 Vue 指令。把属性放进去。

v-for="foo in foos /* @click='foo.on = !foo.on' */"

解决方案 3 和 4 将属性放在标记之外。

溶胶。 3：

<div v-if="false">
  @click="foo.on = !foo.on"
</div>

溶胶。 4：<!-- @click="foo.on = !foo.on" -->

【参考方案2】：

删除/隐藏组件属性的一种方法是为其创建自定义指令。

假设您创建了一个名为 v-hide 的指令并将其放入您的组件中：

<my-comp  v-model="value" @click="handleClick" v-hide :disable='true'></my-comp> 

输出将是：

<my-comp  v-model="value" @click="handleClick"></my-comp> 

这是一个工作示例：

Vue.component ('my-component', 
  template: `<p> A custom template </p>`
)

Vue.directive('hide', 
  inserted: function (el) 
   console.log('el before hide', el)
    while(el.attributes.length > 0)
    el.removeAttribute(el.attributes[0].name);
    console.log('el after hide', el)
  
)

new Vue(
  el: '#app',
  data () 
    return 
      someValue: 'Hello'
    
  
)

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>

<div id="app">
  <my-component v-model='someValue' v-hide :disable='true'></my-component>
</div>

【参考方案3】：

我认为您不能将 HTML 注释放在组件标记中，原因与您不能将 cmets 放在 HTML 元素开始标记中的原因大致相同。在任何一种情况下，它都不是有效的标记。我认为您最接近的方法是将评论放在引号中：

:disabled="// !isValid"

效果与以下相同：

:disabled=""

根据您的组件是否可以处理丢失的值，这可能符合您的需求。

【讨论】：

在 2.6.11 版本中，您的解决方案的概念使用不同的语法。 :disabled="false /* !isValid */"