Vue.js - 如果输入为空，我如何更改输出值

Question

我是 vue.js 新手。如果输入值为空，我想将输出文本更改为占位符中的相同字符串。这是我想要的代码

<div id="form">
<input class="input-f" type="text" placeholder="please enter your first name" v-model="firstName">
<input class="input-l" type="text" placeholder="please enter your last name" v-model="lastName">
<div class="output">
  <p class="f">{{firstName}}</p>
  <p class="l">{{lastName}}</p>
</div>

vuejs 与 jquery

(function(window) {
var data = {
  firstName: "Stack",
  lastName: "Overflow",
}
var vm = new Vue({
  el: "#form",
  data: data,
  watch: {
    firstName: function(v) {
      if (!v) {
        $(".f").text($(".input-f").attr("placeholder"))
      }
    },
    lastName: function(v) {
      if (!v) {
        $(".l").text($(".input-l").attr("placeholder"))
      }
    }
  }

})
})(window)

此外，如果我将输入框留空，数据将不会再次绑定(bind)。请告诉我如何实现它？ https://jsfiddle.net/je491vas/

Answer 1

@charith 大部分时间都在那里。您应该将占位符文本添加到您的数据中，然后将其绑定(bind)到您的输入，并在匹配数据不可用时将其显示在输出中。

let data = {
  firstName: "",
  lastName: "",
  lastNamePlaceHolder: "please enter your last name",
  firstNamePlaceHolder: "please enter your first name"
}
new Vue({
  el:"#form",
  data
})

模板

<div id="form">
  <input class="input-f" type="text" :placeholder="firstNamePlaceHolder" v-model="firstName">
  <input class="input-l" type="text" :placeholder="lastNamePlaceHolder" v-model="lastName">
  <div class="output">
    <p class="f">{{firstName || firstNamePlaceHolder }}</p>
    <p class="l">{{lastName || lastNamePlaceHolder}}</p>
  </div>
</div>

Example .