Vue表单输入绑定

最新推荐文章于 2023-04-29 15:49:56 发布

@、

最新推荐文章于 2023-04-29 15:49:56 发布

阅读量88

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43608642/article/details/117441227

版权

vue表单输入绑定

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <h3 style="color: crimson">表单输入绑定</h3>
      <p style="color: aqua">基础用法</p>
      姓名：<input v-model.lazy="text" placeholder="姓名"></input>{{text}}<br>
      年龄：<input v-model.number="age" type="number">{{age}}<br>
      性别：
      <input type="radio" id="male" value="男" v-model="picked">
      <label for="male">男</label>
      <input type="radio" id="female" value="女" v-model="picked">
      <label for="female">女</label><br>
      爱好：
      <input type="checkbox" id="wangzhe" value="王者" v-model="checkedNames">
      <label for="wangzhe">王者</label>
      <input type="checkbox" id="chiji" value="吃鸡" v-model="checkedNames">
      <label for="chiji">吃鸡</label>
      <input type="checkbox" id="sanbu" value="散步" v-model="checkedNames">
      <label for="sanbu">散步</label>
      <input type="checkbox" id="kejinzhai" value="可劲宅" v-model="checkedNames">
      <label for="kejinzhai">可劲宅</label>
      <br>
      <span>已选择列表: {{ checkedNames }}</span><br>
      现居地：
      <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
      </select>
      <br>
      您选择现居地字典为：{{selected}}
      <br>
      自我介绍： <br>
      <textarea v-model="message" placeholder="快点介绍自己吧......"></textarea>
    </div>
  </body>
</html>
<script type="text/javascript">
  var app = new Vue({
    el: "#app",
    data: {
      text:"",
      age:"",
      message:"",
      picked:'',
      selected:"",
      checkedNames:[],
      options:[
        {value:0,text:" "},
        {value:1,text:"外太空"},
        {value:2,text:"地球"},
        {value:3,text:"火星"},
        {value:4,text:"金星"},
      ]
    },
    methods: {},
    computed: {},
  });
</script>