初学vue之v-model

最新推荐文章于 2023-01-06 15:21:06 发布

一个不合格的程序猿

最新推荐文章于 2023-01-06 15:21:06 发布

阅读量155

点赞数

分类专栏：初学vue 文章标签： vue

本文链接：https://blog.csdn.net/aaafghfdghd/article/details/92849008

版权

初学vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文记录了初学者在学习Vue时，尝试在Vue框架内创建自定义组件并实现v-model功能的过程。遇到的问题是官方文档的源码有误，以及在data()中未正确设置初始值导致界面无法显示。通过修正这些问题，成功实现了在自定义组件中应用v-model，从而在APP.vue中展示数据。

摘要由CSDN通过智能技术生成

初学vue，在学习到v-model语法糖后想要实际操作一下，但是官方文档给的源码有问题，而网上大多数的教程都是使用单个的HTML页面完成的，我想要在vue的默认框架内完成这个功能。即，在APP.vue中添加自定义组件，自定义组件中完成v-model功能，从而显示在界面上。
首先我们知道，v-model的HTML语句是

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

在实际编写中还有很重要的 script 进行编写，之前屡次失败主要就是因为在这一部分缺少了内容。
下面是源码：

  <template>
  <div>
    <p class="p1">{{title}}</p>
    <div class="spancss1">
      <p>单行表单输入</p>
      <label>请输入:</label>
      <input type="text" v-model="inputs">
      <br>
      <p>你在input框中输入了:</p>
      <span>{{inputs}}</span>
    </div>
    <div>
      <p>-----------------------------------------------------------------</p>
      <p>多行表单输入</p>
      <p>Multiline message is:</p>
      <p style="white-space: pre-line;">{{ message }}</p>
      <textarea v-model="message" placeholder="add multiple lines"></textarea>
    </div>
    <div>
      <p>-----------------------------------------------------------------</p>
      <p>单个复选框，值为布尔值</p>
      <input type="checkbox" id="checkbox" v-model="checked">
      <label for="checkbox">{{ checked }}</label>
    </div>
    <div>
      <p>-----------------------------------------------------------------</p>
      <p>多个复选框，绑定到同一个数组</p>
      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      <label for="jack">Jack</label>
      <input type="checkbox" id="john" value="John" v-model="checkedNames">
      <label for="john">John</label>
      <p>Checked names: {{ checkedNames }}</p>
    </div>
    <div>
      <p>-----------------------------------------------------------------</p>
      <p>单选</p>
      <input type="radio" id="one" value="One" v-model="picked">
      <label for="one">One</label>
      <br>
      <input type="radio" id="two" value="Two" v-model="picked">
      <label for="two">Two</label>
      <br>
    </div>
    <div>
      <p>-----------------------------------------------------------------</p>
      <p>select框</p>
      <select v-model="selected">
        <option disabled value>请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <p>Select:{{selected}}</p>
    </div>
  </div>
</template>
 
 <script>
export default {
  name: "v-model",
  data() {
    return {
      title: "v-model学习",
      inputs: "", //问题的核心，应该是需要重读
      message: "",
      checked: "",
      checkedNames: [],
      picked: "",
      selected: ""
    };
  }
};
</script>
 
 <style scoped>
.p1 {
  text-align: center;
}
.spancss1 {
  float: center;
}
</style>

之前失败是因为在data()中没有填写“ inputs：‘’ ”，没有实现第二次访问，所以无法显示在界面。