Javascript 是否在vue.js中声明被动数据属性？

我有一个非常基本的

vue.js

应用程序：

var app = new Vue({
  el: '#app',
  delimiters: ['${', '}'],

  data: {
    messages: [
      'Hello from Vue!',
      'Other line...'
    ]
  }

})

以下

html

工作正常：

  <div class="container" id="app">
    <div class="row" style="">
      <div class="col-md-8 offset-md-2">
        <span v-for="msg in messages">${msg}</span>
      </div>
    </div>
  </div>

[Vue warn]：属性或方法“msg”未在实例上定义，但在渲染期间被引用。确保在数据选项中声明反应数据属性

我正在使用VUEV2.3.3。有什么问题吗？

如前所述，文本区域中的插值不起作用，因此需要使用

v-model

如果您只想在textarea中显示html，那么理论上，您可以通过将数组字段包装在函数中并将该函数设置为textarea v-model来使用一种难看的解决方法：

var app = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    messages: [
      'Hello from Vue!',
      'Other line...'
    ]
  },
  computed:{
    multiLineMessages: function(){
      var result = "";
      for(var message of this.messages){
        result += '<span>' + message + '</span>'
      }
      return result;
        }
    }
});

var-app=新的Vue({
el:“#应用程序”，
分隔符：['${'，'}']，
数据：{
信息：[
“Vue你好！”，
“其他线路…”
]
},
计算：{
多消息：函数（）{
var结果=”；
for（此.messages的var消息）{
结果+=''+消息+''
}
返回结果；
}
}
});

模板部分：

<div class="container" id="app">
    <div class="row" style="">
      <div class="col-md-8 offset-md-2">
        <textarea v-model="multiLineMessages" placeholder="add multiple lines">
        </textarea>
      </div>
    </div>
  </div>

这更像是证明它是可行的，但我强烈建议不要在任何地方使用它，因为html不应该以这种方式生成（尤其是大块的html）。

---

文档中说它在文本区域内不起作用

<div class="container" id="app">
    <div class="row" style="">
      <div class="col-md-8 offset-md-2">
        <textarea v-model="multiLineMessages" placeholder="add multiple lines">
        </textarea>
      </div>
    </div>
  </div>