Question

我正在学习Vue，并尝试使用字符串参数创建对onclick函数的调用。但是似乎我不能使用单'或双'引号。转义方式'/'或/“也不起作用。有没有办法在不将名称放入Vue组件的数据部分的情况下完成此操作？输出将从以下内容更改：嘿，我是Gandalfion。更改为嘿，我是nameinstringformat。单击组件的按钮（如果一切正常）。

Vue.component('greeting',{
template:"<p>Hey there i am {{name}}.<button v- 
on:click='changeName("nameinstringformat")'>Change name!</button></p>"
  ,
data : function(){
  return{
    name: 'Gandalfion'

  }
},
methods: {
  changeName: function(namein){
    this.name=namein
  }
}

//这不起作用

Vue.component('greeting',{
template:"<p>Hey there i am {{name}}.<button v-on:click='changeName(name2)'>Change name!</button></p>"
  ,
data : function(){
  return{
    name: 'Gandalfion',
    name2: 'Leif2'
  }  
},
methods: {
  changeName: function(namein){
    this.name=namein
  }
}
//this workaround works

Answer 1

您是否使用“ /”转义引号？是的，那么您应该使用“ \”（反斜杠）：）

所以这应该起作用：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
    <h2 align='center'>Mapped data</h2>
    <table id="Mapped table">
        <tr>
            <th>Account Number</th>
            <th>Account Description</th>
            <th>Amount</th>
            <th>Mapping</th>
        </tr>
        <tr>
            <td>2010</td>
            <td>Lucky money</td>
            <td>1111.0</td>
            <td>
                <select class="dropbtn">
                    <option value="1" selected>Cash</option>
                    <option value="2">Debt</option>
                    <option value="3">Retained Earnings</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>1234</td>
            <td>Bad debt</td>
            <td>222222.0</td>
            <td>
                <select class="dropbtn">
                    <option value="1">Cash</option>
                    <option value="2" selected>Debt</option>
                    <option value="3">Retained Earnings</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>1234</td>
            <td>USD</td>
            <td>222222.0</td>
            <td>
                <select class="dropbtn">
                    <option value="1" selected>Cash</option>
                    <option value="2">Debt</option>
                    <option value="3">Retained Earnings</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>1234</td>
            <td>Petty cash</td>
            <td>222222.0</td>
            <td>
                <select class="dropbtn">
                    <option value="1" selected>Cash</option>
                    <option value="2">Debt</option>
                    <option value="3">Retained Earnings</option>
                </select>
            </td>
        </tr>
    </table>
</div>

<div class="wrapper">
    <button class="button" id="myBtn">Confirm mapping</button>
</div>

P.S。即使您只是在学习，也请开始注意代码格式和间距。

Answer 2

有各种各样的方法可以使其逃脱以使其正常工作。与所有转义一样，关键是要准确理解为什么需要转义某些东西并采用适当的转义序列。

使用\"应该可以正常工作，因为双引号只是与模板字符串的分隔符冲突。其他类似的转义序列，例如\u0022也应该起作用。

在您的示例中，您在属性值周围使用了单引号，因此要在内联侦听器中使用单引号，您需要使用HTML实体对其进行转义。例如'。您可以执行类似的操作来使双引号也起作用。

这是使用Vue SFC的原因之一，因为它通过不使用JavaScript字符串来指定模板来避免所有字符串转义问题。

在将模板指定为字符串时，通常的惯例是对模板字符串的分隔符使用反引号，对属性值使用双引号，对于在这些值内的字符串使用单引号。例如：

template: `
  <p>
    Hey there i am {{name}}.
    <button v-on:click="changeName('nameinstringformat')">
      Change name!
    </button>
  </p>
`

大多数时候都避免任何冲突。使用反引号还有一个额外的优点，即字符串可以跨越多行。

此示例说明了\"和'：

Vue.component('greeting', {
  template: "<p>Hey there i am {{name}}.<button @click='changeName(\"nameinstringformat\")'>Change name!</button><button @click='changeName(&#39;nameinstringformat2&#39;)'>Change name!</button></p>",
  data () {
    return {
      name: 'Gandalfion'
    }
  },
  methods: {
    changeName (namein) {
      this.name = namein
    }
  }
})

new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <greeting></greeting>
</div>

在Vue模板字符串中的函数中输入字符串值

2 个答案: