Vue样式绑定事件绑定

Posted yangzhizong

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue样式绑定事件绑定相关的知识，希望对你有一定的参考价值。

1.样式绑定

1.1class类标签绑定

<p :class="对象">
<p :class="数组">
<p :class="{类名:true/false, 类名:true/false}">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue class标签绑定操作</title>
    <style>
        .item {
            width: 600px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        .current {
            border-color:red;
        }
        .active {
            border-color:green;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>样式操作</h1>
        <hr>

        <!--calss第一种绑定 :class=‘对象‘  -->
        <p class="item" :class="cname"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente alias autem a velit neque dolore blanditiis cumque enim provident, expedita, non debitis, fugiat atque at doloribus distinctio vero repellendus maxime.</p>
        <!--就类似于 ：class="{current:cname}" 里面都是对象-->
        <!-- <p class="item" :class="{current:cname}"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente alias autem a velit neque dolore blanditiis cumque enim provident, expedita, non debitis, fugiat atque at doloribus distinctio vero repellendus maxime.</p> -->


        <!--calss第二种绑定:class="{类名:true/false, 类名:true/false}">-->
        <p class="item" :class="{current:isCurrent, active:true, link:true, ‘li-item‘:true}"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente alias autem a velit neque dolore blanditiis cumque enim provident, expedita, non debitis, fugiat atque at doloribus distinctio vero repellendus maxime.</p>

        <!--可以统一将对象用一个属性，直接调用属性去完成对样式的修改-->
        <p :class="classObj">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor provident officia facilis ipsam nisi doloribus earum ratione dolorem, minus, suscipit, magnam beatae. Magni dolor similique, a molestias neque officiis animi?</p>

        
        <!--class第三种绑定 :class="数组"-->
        <p :class="classList">Lorem ipsum dolor sit amet.</p>
    </div>

    <script src="../dist/js/vue.js"></script>
    <script>
        new Vue({
            el:‘#app‘,
            data: {
                cname:‘curret‘, //<p class="item" :class="cname">
                // cname:true,        //<p class="item" :class="{current:cname}">
                isCurrent: false,

                classObj: {item:true, link:true,active:true},
                classList: [‘link‘, ‘item‘]   //数组
            }
        });
    </script>
</body>
</html>

1.2 style样式绑定

<p :style="{color:‘值‘, background:‘值‘}">
<p :style="[{}, {}, {}]">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Style样式绑定</title>
    <style>
        p {
            border:1px solid #ccc;
            width: 700px;
            padding:20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>Style绑定</h1>

        <p :style="styleValue">Lorem ipsum dolor sit amet.</p>
        <!--<p :style="{color:‘值‘, background:‘值‘}">-->
        <p :style="{color:‘purple‘, background:‘pink‘}">Lorem ipsum dolor sit amet.</p>
        <p :style="styleObj">Lorem ipsum dolor sit amet.</p>
        <!--<p :style="[{对象1}, {对象2}, {}]">-->
        <p :style="[styleObj, {borderWidth:‘2px‘}]">Lorem ipsum dolor sit amet.</p>
    </div>

    <script src="../dist/js/vue.js"></script>
    <script>
        new Vue({
            el:‘#app‘,
            data: {
                styleValue: ‘color:red;background:green‘,
                styleObj: {color:‘pink‘,background:‘#ccc‘, transform:‘translate(0, 0)‘}
            }
        });
    </script>
</body>
</html>

2 事件

2.1 事件绑定

<p @事件名="方法">  简写的方式
<p v-on:事件名="方法">
方法加 () 的问题 
<p @事件名="方法(1,1,2,3,$event)">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 事件</title>
    <link rel="stylesheet" href="../dist/css/bootstrap.css">
</head>
<body>
    <div id="app" class="container">
        <div class="page-header">
            <h1>Vue 事件</h1>
        </div>

        <div class="row">
            <div class="col-md-12">
                <button @click="counter ++" class="btn btn-default"> +1 </button>
                <button @click="addCounter(1)" class="btn btn-default"> +1 </button>
                <button @click="addCounter(10)" class="btn btn-default"> +10 </button>

                <hr>

                <p class="info">
                    {{counter}}
                </p>

                <hr>

                <div class="alert alert-info" @mousemove="onMoveFn">
                    Lorem ipsum dolor sit amet.
                </div>

                <!--绑定对象同时后面还可以加参数-->
                <div class="alert alert-danger" @mousemove="onMoveFn($event, 100)">
                    验证鼠标绑定事件.
                </div>
            </div>
        </div>
    </div>

    <script src="../dist/js/vue.js"></script>
    <script>
        new Vue({
            el:‘#app‘,
            data: {
                counter:0
            },
            methods: {
                addCounter(num=1) {
                    this.counter += num;
                },

                onMoveFn(ev, num) {
                    console.log(ev.target) //获取鼠标移动到哪个事件<div class="alert alert-info">...</div>
                    console.log(ev)   //MouseEvent{}
                    console.log(num)   //100
                    //ev 是获取的event 对象
                    console.log(ev.pageX, ev.pageY)  //获取点击事件的位置坐标
                },

            }
        })
    </script>
</body>
</html>

2.2 事件修饰符

.stop  阻止事件冒泡
.prevent  阻止默认动作   
.capture   捕获阶段触发事件
.once      只绑定一次
.self      只有本身才触发
.passive   优化移动端的scroll事件

<p @click.stop="">
<p @click.stop.prevent="">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 事件</title>
    <link rel="stylesheet" href="../dist/css/bootstrap.css">
    <style>
        .box {
            width:200px;
            height:200px;
            border:1px solid red;
        }
        .inner {
            width:100px;
            height:100px;
            margin:50px;
            background: pink
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <div class="page-header">
            <h1>Vue 事件修饰符  键盘修饰符</h1>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="box" @click.self="boxFn">  <!--@click.self 意思是只有点自己才执行-->
                    <!--捕获：有外向内-->
                    <!--冒泡：由内向外-->
                    <div class="inner" @click.stop="innerFn"></div>   <!--有效的阻止了事件冒泡,指定了点击内部时只有内部的触发冒泡，父类的不触发-->
                </div>
            </div>
        </div>

        <hr>

        <div class="row">
            <div class="col-md-6">
                
                <input type="text" class="form-control" @keyup.65="onkeyupFn">  <!--捕获点击A键-->
                <input type="text" class="form-control" @keyup.enter="onkeyupFn">  <!--捕获点击enter键-->
                <input type="text" class="form-control" @keyup.ctrl.65="onkeyupFn">  <!--捕获点击Ctrl+A键-->

            </div>
        </div>
    </div>

    <script src="../dist/js/vue.js"></script>
    <script>
        new Vue({
            el:‘#app‘,
            methods: {
                boxFn(){
                    console.log(‘box‘);
                },
                innerFn(){
                    console.log(‘inner‘);
                    //event.stopPropagation();
                },
                onkeyupFn(event) {
                    console.log(‘按了 ‘+event.keyCode+‘ 按键‘)
                }
            }
        })
    </script>
</body>
</html>

2.3 键盘修饰符

.enter
.space
.tab
.up
.left
.right
.down
.delete
.数字 (ascii )

2.4 系统按键修饰符

.ctrl
.alt
.shift
.meta

<input @keyup.ctrl.enter>  按住ctrl再按回车

3  表单

文本  
input:text textarea   v-model

checkbox 单个（绑定到布尔值）  
true-value false-value true/false

checkbox 多个复选框（绑定到同一个数组中）

单选按钮（绑定value对象的字符串）  
input:redio  v-model  value值

select选择框   option的value值     多选 multiple, 数组

v-model.trim
v-model.number  把值转为 number 类型
v-model.lazy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单数据绑定</title>
    <style>
        p {
            border: 1px solid #ccc;
            width: 600px;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>表单数据绑定</h1>
        <hr>

        <input type="text" v-model="message">
        <br>
        <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
        <br>


        <h3>单个复选框(绑定到布尔值checkVa101 即下面checkKVal01:true)</h3>
        <!--type:checkbox  v-model:指定一个-->
        <input type="checkbox" v-model="checkVal01" true-value="yes" false-value="no">全选
        <br>

        <h3>多个复选框(绑定到同一数组loveList 即下面loveList:[‘lanball‘])</h3>
        <input type="checkbox" value="lanball" v-model="loveList">篮球
        <input type="checkbox" value="zuball" v-model="loveList">足球
        <input type="checkbox" value="bangball" v-model="loveList">棒球
        <input type="checkbox" value="paiball" v-model="loveList">排球

        <h3>单选按钮(绑定value对象的字符串 即下面sex:‘male‘,)</h3>
        <input type="radio" v-model="sex" value="male"> 男
        <input type="radio" v-model="sex" value="female"> 女
        
        <h3>选择框（绑定对应所选的值    即下面address:‘上海‘）</h3>
        <select v-model="address">
            <option value="上海">上海</option>
            <option value="北京">北京</option>
            <option value="深圳">深圳</option>
            <option value="广州">广州</option>
        </select>


        <h3>修饰符numberlazy</h3>
        <!--.number将输入的信息转为数字类型-->
        <!--.lazy失去焦点 内容变化-->
        <!--.trim取出两端的空格-->
        <input type="text" v-model.number.lazy="num">

        
        <p> {{num}} </p>
        <p> {{address}} </p>
        <p> {{sex}} </p>
        <p> {{loveList}} </p>
        <p>{{checkVal01}}</p>
        <p>{{ message }}</p>
        <p>{{ message }}</p>

    
    </div>

    <script src="../dist/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: ‘#app‘,
            data:{
                message:‘同志‘,
                checkVal01: true,
                loveList:[‘bangball‘],  //多个复选框要绑定到同一个数组中(括号里面可以写默认选中的值)
                sex:‘male‘,
                address:‘广州‘,
                num:0
            }
        })
    </script>
</body>
</html>

 

aaaaaaaaaaaaaa

 

 

 

 

 

 

 

 

 

 

 

 

获取表单input里面的数据信息

<input v-model="formData.username">
<input v-model="formData.pwd">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取input表单数据信息</title>
    <link rel="stylesheet" href="../dist/css/bootstrap.css">
    <style>
    
    </style>
</head>
<body>

    <div id="app">
        <div class="container">
            <div class="page-header">
                <h1>表单提交</h1>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <!--设置@submit.prevent=‘‘，限制表单提交-->
                    <form @submit.prevent="">
                        <div class="form-group">
                            <!--label中的for绑定input中的id值，可以实现点击‘用户名‘的时候也可以获取input的焦点-->
                            <label for="textInput">用户名</label>
                            <input id="textInput" type="text" class="form-control" v-model="loginData.username" placeholder="请输入用户名">
                        </div>

                        <div class="form-group">
                            <label for="#">密码</label>
                            <input type="password" class="form-control" v-model="loginData.pwd">
                        </div>

                        <div class="checkbox">
                            <label for="#">
                                <!--loginData.remember:true默认是选中，‘‘默认是空-->
                                <input type="checkbox" v-model="loginData.remember"> 记住密码
                            </label>
                        </div>

                        <!--button绑定了login（）方法，点击之后后台可以获取所有表单的值-->
                        <button class="btn btn-success btn-block" @click="login()">登 录</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    

    <script src="../dist/js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:‘#app‘,
            data: {
                loginData: {
                    username:‘‘,
                    pwd:‘‘,
                    remember:‘‘,  //单选框默认状态是没选
                }
            },
            methods: {
                login() {
                    //获取所有表单的值
                    console.log(this.loginData)
                }
            }
        })
    </script>
</body>
</html>

以上是关于Vue样式绑定事件绑定的主要内容，如果未能解决你的问题，请参考以下文章

Vue样式绑定事件绑定

Vue基础语法(样式绑定,事件处理,表单,Vue组件)

Vue 数据，属性，样式，绑定 + 分支循环

Vue 数据，属性，样式，绑定 + 分支循环

Vue 事件&样式样式

Vue.js高效前端开发 • Vue基本指令