表单绑定

最新推荐文章于 2024-03-22 15:24:17 发布

猪皮惡霸

最新推荐文章于 2024-03-22 15:24:17 发布

阅读量68

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/typeof83/article/details/109732457

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span{
  margin-right: 30px;
}
</style>
</head>
<body>

<div id="app">
  <input type="text" v-model="ipt">
  <div>{{ipt}}</div>
  <hr>
  <textarea v-model="txt"></textarea>
  <div>{{txt}}</div>
  <hr>
  <input type="checkbox" v-model="xy">
  我已阅读，同意此协议{{xy}}
  <hr>
  爱好：
  <span v-for="(item,index) in list">
    <input type="checkbox" v-model="res" :value="item.id">
    <label v-text="item.con"></label>
  </span>
  <hr>
  性别：
  <input type="radio" v-model="sex" value="0">女
  <input type="radio" v-model="sex" value="1">男
  <input type="radio" v-model="sex" value="3">妖
  <div>{{sex}}</div>
  <hr>
  <select v-model="sel">
    <option value="1">red</option>
    <option value="2">blue</option>
    <option value="3">green</option>
  </select>
  <div>{{sel}}</div>
  <hr>
  <select v-model="sel2" multiple>
    <option value="1">red</option>
    <option value="2">blue</option>
    <option value="3">green</option>
  </select>
  <div>{{sel2}}</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建vue实例
var vm = new Vue({//配置项
  el: '#app',// 挂载点
  data: {// 数据
    ipt: '123',
    txt: '456',
    xy: false,
    list: [
      {id:1,con: '运动'},
      {id:2,con: '旅游'},
      {id:3,con: '看书'},
      {id:4,con: '游泳'},
      {id:5,con: '看电影'}
    ],
    res: [2,4],
    sex: '',
    sel: '',
    sel2: []
  },
  methods: {// 方法，事件处理函数所在的地方
    
  }
})
</script>
</body>
</html>

猪皮惡霸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单绑定

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>span{ margin-right: 30px;}</style&g
复制链接

扫一扫