<!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>
        .box1{
            width: 300px;
            height: 300px;
            border: 5px solid red;
        }
        .box2{
            width: 200px;
            height: 200px;
            border: 5px solid orange;
        }
        .box3{
            width: 100px;
            height: 100px;
            display: inline-block;
            border: 5px solid pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 事件修饰符
        .prevent阻止浏览器默认行为
        .stop阻止冒泡事件
        .once只能触发一次
        .capture捕获模式 ，先触发带有该修饰符的元素，多个该修饰符，则由外而内触发
        打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，
        先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。）
        .self阻止自身事件促发，但不会阻止冒泡,(间接有捕获模式)
        给元素设置self后，点击当前设置的自身元素会触发
        点击设置self的子类，会跳过设置了self的元素-->
        <!-- event.stopPropagation();阻止冒泡事件 -->
        <a href="" @click.prevent="func1()">链接</a>
        <div @click.self="func2()" class="box1">
            我是div
            <p @click.self="func3()" class="box2">
                我是p
                <span @click="func4()" class="box3">我是span</span>
            </p>
        </div>
        <!-- v-model修饰符
        v-model.lazy失去焦点后提交数据(data)
        v-model.number可以将字符串转换为有效数字  "1"==1
        v.model.trim清除前后空格 -->
        <form action="" method="" @click.prevent="func()">
            姓名：<input type="text" v-model.trim="dataList.userName">
            <br>
            <!-- .number可以将字符串转换为有效数字  "1"==1 -->
            <!-- 注：通常使用v-model绑定表单v-model="",
            v-model:value="" 需要设置默认值-->
            年龄1：<input type="number" v-model.number="dataList.age">
            年龄2：<input type="number" v-model="dataList.ages">

            <br>
            性别：
            <label for="nan">男</label>
            <input type="radio" id="nan" name="1" v-model="dataList.sex" value="1">
            <label for="nv">女</label>
            <input type="radio" id="nv" name="1" v-model="dataList.sex" value="2">
            <br>
            <!-- .lazy失去焦点后提交数据(data) -->
            手机号1：<input type="tel" v-model.lazy="dataList.iphone">
            {{dataList.iphone}}
            手机号2：<input type="tel" v-model="dataList.iphones">
            {{dataList.iphones}}
            <br>
            爱好：
            <label for="sing">唱</label>
            <input type="checkbox" id="sing" v-model="dataList.hobby" value="1">
            <label for="dance">跳</label>
            <input type="checkbox" id="dance" v-model="dataList.hobby" value="2">
            <label for="rap">rap</label>
            <input type="checkbox" id="rap" v-model="dataList.hobby" value="3">
            <label for="basketball">篮球</label>
            <input type="checkbox" id="basketball" v-model="dataList.hobby" value="4">
            <br>
            <input type="submit" value="提交">
            <!-- <button>确定</button> -->
        </form>
    </div>
</body>
<script src="../vue.js"></script>
<script>
    var vm = new Vue({
        data() {
            
        }

    })
    Vue.config.productionTip = false;
    var vm = new Vue({
        el:"#app",
        data() {
            return {
                dataList:{
                    userName:"",
                    age:0,
                    ages:0,
                    // sex中1：男，2女
                    sex:"",
                    iphone:"",
                    iphones:"",
                    // hobby：1：2,3,4
                    hobby:[]
                }
            }
        },
        methods: {
            func(){
                console.log(this.dataList.age+this.dataList.ages);
                console.log(typeof this.dataList.age);
                console.log(typeof this.dataList.ages);
                console.log(this.dataList);
            },
            func1(){
                console.log(111111111111111);
            },
            func2(){
                console.log("div元素");
            },
            func3(){
                // console.log(event);
                // event.stopPropagation();
                console.log("p元素");
            },
            func4(){
                console.log("span元素");
            }
        },
    })
</script>
</html>
# javascript # 开发语言
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign