vue表单操作，自定义指令，计算属性，侦听器

最新推荐文章于 2023-01-06 14:18:14 发布

鸵鸟七号~~

最新推荐文章于 2023-01-06 14:18:14 发布

阅读量773

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_64895976/article/details/124042963

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="js/vue.js" type="text/javascript"></script>

    <div id="app">
        <form>
            用户名：<input type="text" v-model="msg"><br>
            性  别：<input type="radio" name="sex" value="0" v-model="gender">男&nbsp;<input type="radio" name="sex" v-model="gender" value="1">女<br>
            <!-- multiple属性是一个布尔属性。 .multiple属性规定可同时选择多个选项 -->
            职  业：<select name="perfession" v-model="perfession" multiple>
                <option value="1">老师</option>
                <option value="2">警察</option>
                <option value="3">军人</option>
            </select><br>
            爱  好：<input type="checkbox" value="足球" v-model="hobby">足球
                    <input type="checkbox" value="蓝球" v-model="hobby">篮球
                    <input type="checkbox" value="网球" v-model="hobby">网球<br>
            简  介：<textarea name="interduce" v-model="interduce"></textarea><br>
            <input type="submit" value="提交" @click.prevent="handle">
        </form>

        <div>
            <!-- v-model.trim  去除字符串前后的空格，中间的空额去不掉 -->
             <!-- v-model.number  转化为数值 -->
              <!-- v-model.lazy （失去焦点的时候触发） 将input事件换成change事件 -->
            <input type="text" v-model.lazy="msg1">{{msg1}}<br>
            <button @click="handle1">点1</button>
        </div>


        <div>
            获得焦点<input type="text" v-color="color"><br>
            <!-- <button @click="handle2">点2</button> -->
        </div>

        {{info}}
        <!-- {{info.split('').reverse().join('')}} -->
        {{reverseString}}
        {{reverseString}}

        {{reversehandle() }}
        {{reversehandle() }}

        <div>
            <div>
                <!-- 侦听当前的姓 -->
                <input type="text" v-model="firstname"><br>
                <input type="text" v-model="lastname"><br>
                {{watchDemo}}
            </div>
        </div>
    </div>

    <script  type="text/javascript">

        /*Vue.directive('fouce',{
            // el代表着所使用指令的本身 谁使用指令，el就代表谁
            inserted:function(el,binding){
                    el.focus();
                }
            } 
        )

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

        new Vue({
            el:"#app",
            data:{
                msg:"hehehe",
                gender:"1",
                perfession:['1','2'],
                hobby:['足球','篮球'],
                interduce:"sb",
                msg1:"",
                color:"red",
                info:"hehehe",
                firstname:"周",
                lastname:"图图",
                name:"周"+"---"+"图图"
            },
            methods: {
                handle:function(){
                    console.log(this.interduce);
                },
                handle1:function(){
                    console.log(this.msg1+12);
                },
                reversehandle:function(){
                    console.log("methods");
                    return  this.info.split('').reverse().join('')
                }
            },
            directives: {
                color:{
                    inserted: function(el,binding){
                        //el:指令绑定的元素
                        //binding.name指令名	binding.value绑定值	bingding.expression绑定至(字符串形式)
                        el.style.backgroundColor=binding.value;
                    }
                }
            },
            computed: {
                // 直接当做普通属性调用不加括号
                // 任何data中数据变化立即重新计算
                // 计算属性会缓存
                reverseString:function(){
                    console.log("methods");
                    return  this.info.split('').reverse().join('')
                },
                watchDemo:function(){
                    return this.firstname+"------"+this.lastname;
                }
            },
            watch: {
                // 要观察的对象(一般为非DOM事件):
                //这里val代表着你侦听的数据
                firstname:function(val){
                    this.fullname=val+"----"+this.lastname;
                },
                lastname:function(val){ 
                    this.fullname=this.firstname+"---"+val
                }
            },
        })
    </script>
</body>
</html>

鸵鸟七号~~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue表单操作，自定义指令，计算属性，侦听器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫