Vue对表单的简单的操作

最新推荐文章于 2022-07-12 20:33:52 发布

海涛高软

最新推荐文章于 2022-07-12 20:33:52 发布

阅读量257

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_15267341/article/details/103375766

版权

VUE 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">

    <div style="width:45%;float:left;">
        username:<input type="text" v-model="username"/><br/><br/>
        pwd:<input type="password" v-model="pwd"/><br/><br/>
        <button @click="tijiao">提交</button>
    </div>

    <div style="width:45%;float:right;">
        <p v-show="isshow">目前没有内容</p>
        <p v-show="!isshow">当前内容如下：</p>
        <ul>
            <li v-for="(item, index) in shuzu" :key="index"> {{item.username}} ----{{item.pwd}}-----
            <button @click="shanchu(index)">删除</button>
            </li>
        </ul>
        <ul>
            <li v-for="(item ,index) in likes">{{item}}</li>
        </ul>
        <hr/>
        {{xihuan}}
    </div>
       <input type="checkbox" value="足球"  v-model="likes">足球<br/>
    <input type="checkbox" value="篮球"  v-model="likes">篮球<br/>
    <input type="checkbox" value="乒乓球"  v-model="likes">乒乓球<br/>
    <br/>
    <input type="radio" value="吃"  v-model="xihuan" />吃<br/>
    <input type="radio" value="喝"  v-model="xihuan" />喝<br/>
    <input type="radio" value="玩"  v-model="xihuan" />玩<br/>
    <input type="radio" value="乐"  v-model="xihuan" />乐<br/>
  <select v-model="city">
      <option value=""> 未选择</option>
      <option value="2"> 信阳</option>
      <option value="3">郑州</option>
      <option value="4">南阳</option>
      <option value="5">驻马店</option>
  </select>
    {{city}}



    <div>
        <button @click="dian('xuhaihunkxu',$event)"><a>ti交</a></button>
    </div>


</div>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            username: "",
            pwd: "",
            shuzu: [],
            likes:[],
            xihuan:"",
            city:"5"
        },
        methods: {

            tijiao() {
                const kk = {"username": this.username, "pwd": this.pwd};
                this.shuzu.unshift(kk);
            },
            shanchu(index) {
                this.shuzu.splice(index, 1);
            },
            dian(vall,e){
                alert(vall+  " "+e.target.innerText)
            }
        },
        computed: {
            isshow(){
                return this.shuzu.length==0;
            }
        },
        mounted: {}
    });

</script>
</body>
</html>

海涛高软

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue对表单的简单的操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"&gt...
复制链接

扫一扫