本文介绍了如何引用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 :
.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
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模板中的数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！