如何引用vue，js pug模板中的数据？-前端问题

How to reference data from vue,js pug template?(如何引用vue，js pug模板中的数据？)

本文介绍了如何引用vue，js pug模板中的数据？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

基本上，我尝试从事件名称创建永久链接。当我使用v-model从事件名称中获取值时，它可以工作，但是如何将转换后的固定链接放回PUG中的另一个输入框？

这行得通：

"P {{message}}",textarea(rows="2") {{message}}

但当我尝试以下操作时：

input(value="{{message}}"),input(value={{message}}),input(value=#{{message}}),input(value=@{{message}}),input(value=#{message})

PUG不呈现它&；显示缩进错误。我的问题是如何在输入值中绑定或引用Vue中的数据？

PUG模板：

.col-md-12(style="padding:0px;")
    .col-md-2.labelcont
        label.labeltext Event Name&nbsp;: 
    .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&nbsp;: 
    .col-md-10
        textarea(
          type="text"
          class="form-control"
          placeholder="Event Permalink"
        ) {{eventpermalink}}

Vue.js代码：

var basicinfo = new Vue({

    el: '#basic',
    data: {
      eventname: '',
      eventpermalink: '',
    }
  })

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

推荐答案

您可以使用v-bind指令。这样，您就可以将任何HTML元素的属性绑定到一个值，无论它是经过计算的，还是对您的道具或数据的引用。

在您的情况下，应该是这样的：

input(type="text" class="form-control" placeholder="Event Name" 
     v-model="eventname" v-bind:value="YOUR-DATA-OR-WHATEVER")

查看官方文档进一步阅读：

https://vuejs.org/v2/guide/syntax.html

这篇关于如何引用vue，js pug模板中的数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！