在前端开发中，经常需要对表单中的输入内容进行验证和必填的判断。vue作为一款流行的MVVM框架，提供了丰富的组件和指令，为表单验证和必填判断提供了很好的支持。
要实现输入必填的判断，需要用到vue提供的v-model指令和计算属性。首先，通过v-model指令将输入框和模型进行双向绑定，即输入框的内容发生变化时，模型中存储的值也会随之变化。其次，使用计算属性来判断输入是否为空。计算属性是由vue实例中数据的变化所触发的，它的值被缓存起来，只有在它的依赖发生变化时才被重新计算。
Vue.component('input-box', {
template: ``,
data() {
return {
val: '',
}
},
computed: {
isEmpty: function() {
return this.val.trim() === '';
}
},
methods: {
handleSubmit() {
if (this.isEmpty) {
alert('请输入内容！');
} else {
alert('提交成功！');
}
}
}
});
new Vue({
el: '#app',
});以上是一个简单的输入框组件。组件中的计算属性isEmpty会根据输入框的值来判断输入是否为空。如果输入框的值被trim后等于空字符串，则认为输入为空。在handleSubmit方法中通过调用isEmpty来判断输入是否为空，并做出相应的提示。
除了使用计算属性，还可以通过watch监听输入框的变化，并在变化时进行判断。watch可以监听对象，也可以监听函数。监听函数时，使用箭头函数来绑定作用域，确保watch能够正确地访问this。
Vue.component('input-box', {
template: ``,
data() {
return {
val: '',
}
},
watch: {
val: {
handler: function(newVal) {
if (newVal.trim() === '') {
alert('请输入内容！');
}
},
immediate: true,
},
},
methods: {
handleSubmit() {
alert('提交成功！');
}
}
});
new Vue({
el: '#app',
});以上是一个利用watch来实现输入必填的判断的例子。在watch中，使用handler来处理被监听对象的变化，并在输入为空时弹出提示。如果要立即执行一次watch的回调函数，可以在watch中增加immediate:true选项。
需要注意的是，在表单中进行必填的判断只是保护措施之一，前端验证可以被绕过，因此在后端验证也是必不可少的。前端验证和后端验证相辅相成，保护用户数据的安全。