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>

Vue.js与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)

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

Answer 1

@charith是那里的大部分方式。您应该将占位符文本添加到数据中，然后将其绑定到输入中，如果找不到匹配的数据，则将其显示在输出中。

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>

实例。