表单绑定

最新推荐文章于 2024-12-06 18:03:26 发布

原创最新推荐文章于 2024-12-06 18:03:26 发布 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

这个示例展示了Vue.js如何用于创建交互式的网页应用。包括文本输入、文本区域、复选框、单选按钮、下拉选择及多选的绑定，以及数据的双向绑定。用户输入在界面上实时更新，同时也反映了在Vue实例的数据模型中。

<!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>