Vue表单和指令3

Lovely-Zhang-1026

已于 2022-04-08 14:36:59 修改

阅读量1k

点赞数

文章标签： vue

于 2022-04-08 14:31:42 首次发布

本文链接：https://blog.csdn.net/m0_57508774/article/details/124040766

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
    <script type="text/javascript" src="js/vue.js"></script>

    <div id="app">
        <!-- Vue表单 -->
        <form>
            用户名：<input type="text" v-model="msg"/><br/>
            性别：<input type="radio" value="0" v-model="gender"/>男&nbsp;<input type="radio" value="1" v-model="gender">女<br/><br/>
            <!--multiple 规定可同时选择多个选项 -->
            <!-- 职业<select name="perfession" v-model="perfession" multiple> -->
            职业<select name="perfession" v-model="perfession" multiple>
                <option value="1">老师</option>
                <option value="2">警花</option>
                <option value="3">护士</option>
                <option value="4">空姐</option>
            </select><br/><br/>

            爱好
            <input type="checkbox" value="1" v-model="hobby"/>足球
            <input type="checkbox" value="2" v-model="hobby"/>篮球
            <input type="checkbox" value="3" v-model="hobby"/>台球
            <input type="checkbox" value="4" v-model="hobby"/>网球
            <input type="checkbox" value="5" v-model="hobby"/>羽毛球<br/><br/>

            <!-- textarea 文本域 -->
            简介<textarea name="intreduce" v-model="intreduce"></textarea><br/>
            <!-- 取消默认事件 -->
            <input type="submit" value="提交" @click.prevent="handle"/><br/><br/><br/>
        </form>

        <div>
            <!-- 转换为数值 -->
            <input type="text" v-model.number="msg1" /><br/>

            <!-- 去除空格，不能去除中间的，只能取出两边的 -->
            <input type="text" v-model.trim="msg1" /><br/>

            <!-- 转换为change事件 失去焦点的时候触发-->
            <input type="text" v-model.lazy="msg1" />{{ msg1 }}<br/>
            <button @click="handle1">点我1</button>

        </div>


        <div>
            <!-- 页面刷新获取焦点 -->
            焦点在这<input type="text" v-fouce /><br/>
            背景<input type="text" v-color="color" /><br/>

        </div>

        <div>
            {{ info }}<br/>

            <!-- 反转 -->
            {{ info.split('').reverse().join('') }}<br/>
            计算属性会缓存，第二次会执行第一次执行的结果<br/>
            {{ reverseString }}<br/>
            {{ reverseString }}<br/>

            方法没有缓存，会执行两次<br/>
            {{ reversehandle() }}<br/>
            {{ reversehandle() }}
        </div>

        <div>
            <input type="text" v-model="surname" />{{ surname }}<br/>
            <input type="text" v-model="lastname" />{{ lastname }}<br/>
            {{ name }}<br/><br/>
            {{ watchDemo }}
        </div>

    </div>
    
    <script type="text/javascript">
        // 全局指令
        Vue.directive('fouce', {
            // 代表你所使用指令的本事   谁使用该指令el就代表谁
            inserted:function(el){
                el.focus();
            }
        })

        // Vue.directive('color', {
        //     // 代表你所使用指令的本身   谁使用该指令el就代表谁
        //     inserted:function(el, binding){
        //         //bing.value拿使用这个指令的参数的值。在此，就是拿获得焦点的文本框里面指令里的color的值
        //         el.style.backgroundColor=binding.value;
        //     }
        // })


        new Vue({
            el:"#app",
            data:{
                msg:"zhf",
                gender:"1",
                perfession:['1','2'],
                hobby:['1','2'],
                intreduce:"一句话介绍不了我",
                msg1:"",
                color:"blue",
                info:"hello",

                surname:"涂",
                lastname:"图图",
                name:"涂"+"---"+"图图"

            },
            
            methods: {
                handle:function(){
                    console.log(this.intreduce)
                },
                handle1:function(){
                    // console.log(this.msg1+12)
                    console.log(this.msg1.length)
                },
                reversehandle:function(){
                    console.log("methods")
                    return this.info.split('').reverse().join('')
                }
            },
            
            //局部  带参自定义指令
            directives:{
                    color:{
                        inserted:function(el, binding){
                        //bing.value拿使用这个指令的参数的值。在此，就是拿获得焦点的文本框里面指令里的color的值
                        el.style.backgroundColor=binding.value;
                        }
                    }
                },

            // 计算属性     可以是模板更加简洁
            computed: {
                // 直接当做普通属性调用不加括号
                // 任何data中数据变化立即重新计算
                // 计算属性会缓存
                reverseString:function(){
                    console.log("computed")
                    return this.info.split('').reverse().join('')
                },
                // 在计算属性里边 侦听
                watchDemo:function(){
                    return this.surname+"---"+this.lastname
                }
            },

            // 侦听器
            watch: {
                surname:function(val){//这里val代表你侦听的数据
                    this.name=val+"----"+this.lastname;
                },
                lastname:function(val){
                    this.name=this.surname+"-----"+val;
                }
            }



        })
    </script>

</body>
</html>

Lovely-Zhang-1026

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue表单和指令3

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <meta http-equiv="X-U.
复制链接

扫一扫