我有一个用于发送消息的文本区域,我想阻止电子邮件和站点链接.因此,当我写一个@或https：//时,必须使用v-if显示错误消息,但是我该怎么做呢？哪些功能？
new Vue({
el: "#app",data: {
message: {
content: ""
}
},})body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<textarea v-bind="message" v-model="message.content" cols="30" rows="10">
</textarea>
<p v-if="message.content == '@'">
No special characters
</p>
</div>
</div>最佳答案
您可以按正则表达式类型检查条件var regex = /(@ | https)/ g; .还要为消息显示控件设置hasError数据,并且可以使用vue watch更改数据(message.content)
new Vue({
el: "#app",data: {
message: {
content: ""
},hasError: false
},watch: {
'message.content': function(newVal,oldVal) {
var regex = /(@|https)/g;
this.hasError = newVal.match(regex);
}
}
})body {
background: #20262E;
padding: 10px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 10px;
transition: all 0.2s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<textarea v-bind="message" v-model="message.content" cols="30" rows="5">
</textarea>
<p v-if="hasError">
No special characters
</p>
</div>
</div>