碼上快樂

相關內容    簡體    繁體

Vue樣式綁定、事件綁定

本文轉載自   查看原文   2018-08-22 20:20   2725 

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>修飾符number\lazy</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>


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Vue樣式綁定和事件處理器 vue之click事件綁定 VUE在BODY上綁定enter事件 vue給元素綁定拖拽事件 Vue----class與style綁定，事件的綁定，事件相關的處理 vue系列--vue是如何實現綁定事件 Vue 動態綁定CSS樣式 vue綁定內聯樣式的幾種寫法 Vue v-bind 樣式綁定 vue通過屬性綁定為元素綁定style行內樣式
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM