在Vue中，想要绑定 <textarea> ，同样是使用 v-model。
核心代码
<textarea cols="30" rows="10" v-model="msg"></textarea>
本例全部代码
<template>
<div id="app">
<textarea cols="30" rows="10" v-model="msg"></textarea>
<p>{{ msg }}</p>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: ''
}
}
}
</script>
<textarea> 绑定了 msg，而 <p> 也同样绑定了 msg，所以在多行文本框里面输入什么内容，<p> 标签也会同步输出一样的内容。
上面的例子中需要注意的是，如果我在 <textarea> 里用回车键换行（也就是输入了换行符），在 <p> 标签里并不会换行输出。
而需要解决以上问题，需要在 <p> 标签中用css的一个属性white-space: pre
<p style="white-space: pre">{{ msg }}</p>
另一点需要注意的是：
如果需要给 <textarea> 一个默认值的话，也需要用到v-model，而不是在 <textarea> 两个闭合标签中添加内容
以下写法是错误的！！！
<textarea cols="30" rows="10"> {{msg}} </textarea>