时间戳

首页 > 解决方案 > 在 vue 模板字符串的函数中输入字符串值

string - 在 vue 模板字符串的函数中输入字符串值

问题描述

我正在学习 Vue 并尝试使用字符串参数创建对 onclick 函数的调用。但似乎我不能使用单 ' 或双 " 引号。转义方式 /' 或 /" 也不起作用。有没有办法在不将名称放入 vue 组件的数据部分的情况下完成此操作？输出将从：嘿，我是甘道夫。 嘿，我是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

标签： stringtemplatesvue.js

解决方案

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

所以这应该工作：

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
    }
}

PS即使是刚学，也请开始注意代码格式和间距。

推荐阅读