如何在Pug模板中绑定Vue.js数据至输入框值？

我完全懂你遇到的困扰——在Pug里用{{}}插值能在文本节点（比如p标签或者textarea的内容里）正常显示Vue数据，但放到input的value属性里就触发语法报错，这是因为Pug的属性语法不支持直接在属性值里用插值，得用Vue专门的属性绑定指令才行。

正确的绑定方式：v-bind:value 或简写 :value #

Vue提供的v-bind指令就是用来把DOM属性和Vue实例的数据绑定起来的，在Pug里可以直接这么写：

input(type="text" class="form-control" placeholder="Event Permalink" :value="eventpermalink")

也可以写完整的指令名：

input(type="text" class="form-control" placeholder="Event Permalink" v-bind:value="eventpermalink")

这样就能把eventpermalink的数据正确绑定到input的value属性上，Pug也不会再报缩进或语法错误了。

额外优化建议 #

因为你的permalink是自动生成的，大概率希望用户不能随意修改，所以可以给input加上readonly属性，让它变成只读状态：

input(type="text" class="form-control" placeholder="Event Permalink" :value="eventpermalink" readonly)

如果后续需要允许用户编辑这个permalink，也可以直接用v-model="eventpermalink"，不过这样用户修改后会同步到Vue数据里，你可能需要调整watch逻辑或者做额外的校验处理。

修改后的完整代码示例 #

Pug模板：

#basic
  .col-md-12(style="padding:0px;")
    .col-md-2.labelcont
      label.labeltext Event Name :
    .col-md-10
      input(type="text" class="form-control" placeholder="Event Name" v-model="eventname")
  .col-md-12(style="padding:0px;")
    .col-md-2.labelcont
      label.labeltext Permalink :
    .col-md-10
      input(type="text" class="form-control" placeholder="Event Permalink" :value="eventpermalink" readonly)

Vue.js代码：

var basicinfo = new Vue({
  el: '#basic',
  data: {
    eventname: '',
    eventpermalink: '',
  }
})

basicinfo.$watch('eventname', function (newValue, oldValue) {
  basicinfo.eventpermalink = newValue.replace(/[^a-zA-Z0-9 ]/g,'').replace(/ +/g,'-').toLowerCase();
})

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