小编yuk*_*ari的帖子

我想这样做:

<ul>
  <li class="aaa active">text-aaa</li>
  <li class="bbb">text-bbb</li>
  <li class="ccc">text-ccc</li>
</ul>

这是代码.https://jsfiddle.net/qwvwsgb9/

我可以使用非对象格式绑定由v-for计算的值:class ="v.name"

HTML

<div id="app">
  <ul>
    <li v-for="v, i in listAry" :class="{v.name:true,active:active==i}">{{ v.text }}</li>
  </ul>
</div>

脚本:

let vm = new Vue({
  el: "#app",
  data: {
    active:0,
    listAry: [{
      name: 'aaa',
      text: 'text-aaa'
    }, {
      name: 'bbb',
      text: 'text-bbb'
    }, {
      name: 'ccc',
      text: 'text-ccc'
    }]
  }
})

但只要我尝试以对象格式应用它,就会发生错误.我该怎么做？

我是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/