vue 基础教程（四）表单控件绑定购物车表单修饰符

最新推荐文章于 2022-02-28 15:28:32 发布

小白追梦

最新推荐文章于 2022-02-28 15:28:32 发布

阅读量149

点赞数

分类专栏： vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_43815680/article/details/109029577

版权

1）
vue 表单控件绑定
v-model
再来一个最简单的内容

<html>
  <head>
    <title>test</title>
    <meta charset="utf-8" />
    <style></style>
  </head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="box">
    <input type="text" v-model="myText" />
    {
   {
   myText}}
  </div>

  <body></body>
  <script>
    var vm = new Vue({
   
      el: "#box",
      data: {
   
        myText: "",
      },
    });
  </script>
</html>

异常的舒适，可以实现文本框和状态都变化也可改变状态来改变文本框

多行表单也是可以的
在这里插入图片描述
下一个问题 我想做一个checkbox 用来得到用户是否点击了怎么操作？

现在我想用实现多个选择选一个怎么操作？
而且需要选择到之后 可以监控状态 vm.checkGroup这个数组也随之改变

在这里插入图片描述

<html>
  <head>
    <title>test</title>
    <meta charset="utf-8" />
    <style></style>
  </head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <body>
    <div id="box">
      <p>
        你的爱好是什么？
        <!-- 必须加一个value  不然会变成全选和全不选 -->
        <input type="checkbox" v-model="checkGroup" value="y" />游泳
        <input type="checkbox" v-model="checkGroup" value="d" />读书
        <input type="checkbox" v-model="checkGroup" value="p" />跑步
      </p>
      <!-- 加这个是为了方便展示在页面上 -->
      {
   {
   checkGroup}}
    </div>
  </body>
  <script>
    var vm = new Vue({
   
      el: "#box",
      data: {
   
        myText: "",
        // 这个地方需要用一个数组装选中的东西
        checkGroup: [],
      },
    });
  </script>
</html>

实现单选一个
在这里插入图片描述

最低0.47元/天解锁文章

小白追梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 基础教程（四）表单控件绑定购物车表单修饰符

1）vue 表单控件绑定v-model再来一个最简单的内容<html> <head> <title>test</title> <meta charset="utf-8" /> <style></style> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scri
复制链接

扫一扫