【Vue表单】绑定<textarea>

微信订阅号：Rabbit_svip

在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> 标签也会同步输出一样的内容。

微信订阅号：Rabbit_svip

---

上面的例子中需要注意的是，如果我在 <textarea> 里用回车键换行（也就是输入了换行符），在 <p> 标签里并不会换行输出。

微信订阅号：Rabbit_svip

而需要解决以上问题，需要在 <p> 标签中用css的一个属性white-space: pre

<p style="white-space: pre">{{ msg }}</p>

微信订阅号：Rabbit_svip

---

另一点需要注意的是：
如果需要给 <textarea> 一个默认值的话，也需要用到v-model，而不是在 <textarea> 两个闭合标签中添加内容

以下写法是错误的！！！

<textarea cols="30" rows="10"> {{msg}} </textarea>