Vue深入-5【Vue中自定定义一个表单控件、watch】

最新推荐文章于 2023-08-04 17:25:20 发布

可乐雪碧薄荷糖

最新推荐文章于 2023-08-04 17:25:20 发布

阅读量286

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/110946569

版权

Vue 专栏收录该内容

41 篇文章 2 订阅

订阅专栏

(1).v-model在表单控件中

1.input控件

<input type="text" v-model="message"/>

2.select控件

<select v-model="result">
    <option value="" disabled>请选择</option>//这样即可设置默认为请选择但是无法再次选择
    <option
        v-for="subject in subjects"
        :value="subject.vale"
        :key ="subject.value"
    ></option>
    {{subject.name}}
</select>

3.checkbox

<div id="app">
    <input type = "checkbox" v-model="checked" value="吃饭"/>
    <input type = "checkbox" v-model="checked" value="睡觉"/>
    <input type = "checkbox" v-model="checked" value="打豆豆"/>
    <p>{{checked}}</p>
</div>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                checked:[]
            }
        }
    })
</script>

取消一个框，数组中也会少一个框

4.textarea

这里数据没有换行不是因为你没有设置上换行，而是因p标签的样式没有设置到位

<div id="app">
    <textarea rows="5"  v-model="message"></textarea>
    <p style="white-space:pre">{{message}}</p>
</div>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                message:"hello js++"
            }
        }
    })
</script>

5.radio

单选按钮也要只绑定一个值

这样单选就可以关联在一起了同时修改一个属性

<div id="app">
    <input type = "radio" v-model="value" value="male"/>男
     <input type = "radio" v-model="value" value="female"/>女
     <p>{{value}}</p>
</div>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                value:"male"
            }
        }
    })
</script>

(2).实例

1.开关按钮基础切换更换样式

button.vue
<template>
    <div>
        <div id="on" :class="{active:isOn}" @click="isOn = true">开</div>
        <div id="on" :class="{active:!isOn}" @click="isOn = false">关</div>
    </div>
</template>
<script>
    export default{
        props:['value'],
        data(){
            return {
                isOn:true
            }
        }
    }
</script>
<style>
    #on,#off{
        display:inline-block;
        width:50px;
        height:40px;
        line-height:40px;
        padding:0 15px;
        background-color:#f4f4f4;
    }
    #on:hover,#on.active{
        background:#e5e5e5;
    }
     #off:hover,#on.active{
        background:#f40;
    }
</style>
app.vue
<template>
    <div id="app">
        <app-switch/>
    </div>
</template>
<script>
import Switch from './button.vue'
export default{
    name:'App',
    components:{
        appSwitch:Switch
    }
}
</script>

2.父组件展示切换后得值

button.vue
<template>
    <div>
        <div id="on" :class="{active:value}" @click="change(true)">开</div>
        <div id="on" :class="{active:!value}" @click="change(false)">关</div>
    </div>
</template>
<script>
    export default{
        props:['value'],
        methods:{
            change(status){
                this.$emit('input',status)
            }
        }
    }
</script>
<style>
    #on,#off{
        display:inline-block;
        width:50px;
        height:40px;
        line-height:40px;
        padding:0 15px;
        background-color:#f4f4f4;
    }
    #on:hover,#on.active{
        background:#e5e5e5;
    }
     #off:hover,#on.active{
        background:#f40;
    }
</style>
app.vue
<template>
    <div id="app">
    
        <app-switch v-model="switchValue"/>
        {{switchValue}}
    </div>
</template>
<script>
import Switch from './button.vue'
export default{
    name:'App',
    components:{
        appSwitch:Switch
    },
    data(){
        return{
            switchValue:true
        }
    }
}
</script>

(3).vuex中得双向绑定

1.是否能绑定

在vuex中就没办法直接使用双向绑定了

vuex不能直接修改值而是需要通过在mutations或者actions来修改

只能通过计算属性的get set从而实现双向绑定

main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip=false
new Vue({
    render: h=>h(App),
    store
}).$mount('#app')

index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
    state:{
        value:0
    },
    mutations:{
        updateValue(state,value){
            state.value = value
        }
    }
})

App.vue
<template>
    <div>
    </div>
</template>
<script>
</script>

<template>
    <div>
        <input type = "text" v-model="value"/>//这样不行
        <p>{{value}}</p>
        <input type = "text" v-model="myValue"/>//这样是可以的
        <p>{{value}}</p>
    </div>
</template>
<script>
    name:'App',
    computed:{
       // value:function(){
       //     return this.$store.state.value;//不可以，只能获取不能设置
       // },
       value:{
           get:function(){
               return this.$store.state.value;
           },
           set:function(){
               this.$store.commit('updateValue',value)
           }
       }
        
    },
    data(){
        return{
            myValue:50
        }
    }
</script>

面试官:请说一下怎么让vuex中的数据实现双向绑定？

答:因为vuex不能直接修改值而是需要通过在mutations或者actions来修改，所以无法通过直接双向绑定修改值，而是需要v-model绑定计算属性，在计算属性的set中执行commit方法提交至mutations进行修改

(4).watch属性

1.基本使用

用于监听指定得值是否改变了，从而获取初始值和改变后得值

<div></div>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return{
                a:1
            }
        },
        watch:{
            a:function(newValue,oldValue){
                console.log(newValue,oldValue)
            }
        }
    })
</script>

2.进阶用法

<div></div>
<script>
    let vm = new Vue({
        el:'#app',
        data(){
            return{
                a:1，
                b:2,
                c:{
                    d:50
                }，
                d:90
            }
        },
        methods:{
            someMethods:function(newValue,oldValue){
                console.log('new: %s,old: %s',newValue,oldValue)
            }
        },
        watch:{
            第一种为基础写法
            a:function(newValue,oldValue){
                console.log(newValue,oldValue)
            },
            第二种可以methods绑定
            b:'someMethods',
            第三种是可以监听到对象中的属性的新值，旧值拿不到，深度监听
            c:{
                handler:function(newValue,oldValue){
                    console.log('new:%s,old:%s',newValue.d,oldValue.d)
                },
                deep:true
            },
            第四种就可以监听到对象中得新旧属性了
            'c.d':function(newvalue,oldvalue){
                
            }，
            第五种设置好监听后就执行
            d:{
                handler:function(newValue,oldValue){
                    console.log(newValue,oldValue)
                },
                immediate:true
            },
            第六种多次执行
            f:[
                'someMethods',
                function 2(new ,old){},
                {
                    handler(new,old){
                        log
                    }
                }
            ]
            
        }
    })
</script>