欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue2中Element?UI表單的使用詳解

 更新時間：2022年03月03日 16:17:21   作者：碰磕  
這篇文章主要為大家詳細介紹了Vue2中Element?UI表單的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

引入Element UI

<!-- 引入樣式 -->
<link rel="stylesheet" >
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

表單中組件數(shù)據(jù)的獲取

利用v-model雙向綁定

<div id="app">
        <el-form ref="form" label-width="80px">
            <!-- 文本框 -->
            <el-form-item label="用戶名:">
            <el-input v-model="uname"></el-input>
            </el-form-item>
            <!-- 單選框 -->
            <el-form-item label="性別">
                <el-radio-group v-model="usex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <!-- 復選框 -->
            <el-form-item label="愛好">
            <el-checkbox-group v-model="like">
                <el-checkbox label="吃飯" name="type"></el-checkbox>
                <el-checkbox label="睡覺" name="type"></el-checkbox>
                <el-checkbox label="玩游戲" name="type"></el-checkbox>
                <el-checkbox label="打豆豆" name="type"></el-checkbox>
            </el-checkbox-group>
            </el-form-item>
        <!-- 下拉框 -->
            <el-form-item label="職業(yè)">
                <el-select v-model="job" multiple placeholder="請選擇您的工作"> <!--myltiple表示可多選-->
                <el-option label="軟件工程師" value="軟件工程師"></el-option>
                <el-option label="前端開發(fā)者" value="前端開發(fā)者"></el-option>
                <el-option label="UI設計師" value="UI設計師"></el-option>
                <el-option label="視頻剪輯師" value="視頻剪輯師"></el-option>
                </el-select>
            </el-form-item>
<!-- 多行文本框 -->
            <el-form-item label="簡介">
                <el-input type="textarea" v-model="desc"></el-input>
            </el-form-item>

            <el-form-item>
            <el-button type="primary" @click.prevent="login">立即創(chuàng)建</el-button>
            <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>

代碼詮釋一切,主要提一下：

multiple,它可以表示下拉框多選(實用)

.prevent此處用于阻止表單提交

var vm=new Vue({
        el:"#app",
        data:{
            uname:"",
            usex:"男",
            like:["吃飯","睡覺"],
            job:["UI設計師"],
            desc:"hello,I'm 碰磕"
        },
        methods:{
           login:function(){
                alert("姓名:"+this.uname+",性別:"+this.usex+",愛好:"+this.like+",職業(yè):"+this.job+",簡介:"+this.desc);
           }
        }
    })

效果圖:

在這里插入圖片描述

alert 打印出了所填寫的信息…

表單中的修飾符

名稱用途
.number將類型設定為number類型
.trim去除前后空格
.lazy失去焦點才會實現(xiàn)更新數(shù)據(jù)

實例

<div id="app">
        <el-form ref="form" label-width="80px">
            <!-- 文本框 -->
            <el-form-item label="年齡:">
            <el-input v-model.number="age"></el-input>
            </el-form-item>
            <h1>{{stname}}</h1>
            <!-- 文本框 -->
            姓名:<input v-model.lazy="stname" v-colors="msg" v-autofocus />
<!-- 多行文本框 -->
            <el-form-item label="地址">
                <el-input type="textarea" v-model.trim="address" ></el-input>
            </el-form-item>

            <el-form-item>
            <el-button type="primary" @click.prevent="login" v-color="msg">立即創(chuàng)建</el-button>
            <el-button >取消</el-button>
            </el-form-item>
        </el-form>
    </div>

  var vm=new Vue({
        el:"#app",
        data:{
            age:"",
            address:"",
            stname:""
        },
        methods:{
           login:function(){
                console.log(this.age+10);   //.number將類型設定為number類型
                console.log(this.address);  //.trim去除前后空格
                console.log(this.stname);   //.lazy失去焦點才會實現(xiàn)更新數(shù)據(jù)
           }
        }
    })

效果圖:

在這里插入圖片描述

姓名里的內容失去焦點時h1標簽才會改變對應的內容

并且文本域前方后方不允許空格

點擊立即創(chuàng)建

在這里插入圖片描述

各個修飾符發(fā)揮了對應的作用

自定義指令

我們通常用官方的指令,有時候為了滿足自己的需求,可以進行自定義指令

分為兩種:

局部指令(關鍵詞:directives)、

全局指令(關鍵詞:directive)

全局指令directive

此處我綁定一個默認焦點位置的指令

不帶參inserted

Vue.directive('autofocus',{
        inserted:function(el){
            //el即綁定的元素
            el.focus();//JS自帶的焦點方法
        }
})

使用

v-autofocus

姓名:<input v-model.lazy="stname" v-autofocus />

效果圖：默認焦點

這里是引用

帶參bind

//帶參
    Vue.directive('color',{
        bind:function(el,binding){
            //el即綁定的元素
            //binndding即綁定的參數(shù)
            el.style.color=binding.value.color;
        }
    })
 var vm=new Vue({
        el:"#app",
        data:{
            msg:{
                color:"pink"
            }
        }
    })

使用

v-color='參數(shù)名'

姓名:<input v-model.lazy="stname" v-color="msg" />

效果圖:

在這里插入圖片描述

字體變顏色了…

局部指令directives

照樣綁定一個改變顏色的指令

var vm=new Vue({
        el:"#app",
        data:{
            msg:{
                color:"pink"
            }
        }
        directives:{
            colors:{
                bind:function(el,binding){
                    el.style.color=binding.value.color;
                }
            }
        }
    })

使用

v-colors='參數(shù)名'

姓名:<input v-model.lazy="stname" v-colors="msg" />

效果圖:

在這里插入圖片描述

成功√

總結

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!  

相關文章

  • vue實現(xiàn)帶縮略圖的輪播圖效果

    vue實現(xiàn)帶縮略圖的輪播圖效果

    這篇文章主要為大家詳細介紹了如何使用vue實現(xiàn)帶縮略圖的輪播圖效果,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的可以參考下
    2024-02-02
  • socket io與vue-cli的結合使用的示例代碼

    socket io與vue-cli的結合使用的示例代碼

    這篇文章主要介紹了socket io與vue-cli的結合使用的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • vue3不能使用history.pushState修改url參數(shù)踩坑

    vue3不能使用history.pushState修改url參數(shù)踩坑

    這篇文章主要為大家介紹了vue3不能使用history.pushState修改url參數(shù)踩坑解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-02-02
  • vue實現(xiàn)購物車選擇功能

    vue實現(xiàn)購物車選擇功能

    這篇文章主要為大家詳細介紹了vue實現(xiàn)購物車選擇功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-01-01
  • Vue服務端渲染和Vue瀏覽器端渲染的性能對比(實例PK )

    Vue服務端渲染和Vue瀏覽器端渲染的性能對比(實例PK )

    這篇文章主要介紹了Vue服務端渲染和Vue瀏覽器端渲染的性能對比(實例PK ),非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2017-03-03
  • vue項目Luckysheet的使用

    vue項目Luckysheet的使用

    這篇文章主要介紹了vue項目Luckysheet的使用,目前Luckysheet不支持使用npm安裝包，所以只能使用CDN引入依賴，在vue項目的public/index.html文件里引入即可，本文通過示例代碼給大家詳細介紹，需要的朋友可以參考下
    2022-08-08
  • 詳解axios全局路由攔截的設置方法

    詳解axios全局路由攔截的設置方法

    這篇文章主要介紹了axios全局路由攔截的設置方法,axios全局路由代碼通常是在構建axios實例注入的，本文通過實例代碼介紹的非常詳細，需要的朋友可以參考下
    2023-09-09
  • vue3+ts+elementui-plus二次封裝彈框實戰(zhàn)教程

    vue3+ts+elementui-plus二次封裝彈框實戰(zhàn)教程

    這篇文章主要介紹了vue3+ts+elementui-plus二次封裝彈框實戰(zhàn)教程,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2023-07-07
  • vuex中store.commit和store.dispatch的區(qū)別及使用方法

    vuex中store.commit和store.dispatch的區(qū)別及使用方法

    這篇文章主要介紹了vuex中store.commit和store.dispatch的區(qū)別及使用方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-01-01
  • vue服務端渲染緩存應用詳解

    vue服務端渲染緩存應用詳解

    vue緩存分為頁面緩存、組建緩存、接口緩存，這里我主要說到了頁面緩存和組建緩存。接下來通過本文給大家介紹vue服務端渲染緩存應用 ,需要的朋友可以參考下
    2018-09-09

最新評論