1217 表单循环成员

Posted 2021-03-22 fwzzz

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了1217 表单循环成员相关的知识，希望对你有一定的参考价值。

今日内容

1.表单指令 `v-model=‘变量‘`

1.1 数据的双向绑定

变量值与表单标签的value相关

v-model 可以实现数据的双向绑定:
v-model绑定的变量值可以影响表单标签的值,反过来单标签的值也可以影响变量的值

        <input type="text" v-model="v1">   {{ v1 }}

1.2 单选框

可以控制单选框的属性选择

男<input type="radio" name="sex" value="male" v-model="v2">
女<input type="radio" name="sex" value="female" v-model="v2">
{{ v2 }}

        data:{
            v2:'male'
        }

1.3 单一复选框

使用true或false来控制单一复选框的选取

卖身契：同意 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }}

1.4 多复选框

使用列表来控制多复选框的选择

男：<input type="checkbox" name="hobbies" value="male" v-model="v4">
女：<input type="checkbox" name="hobbies" value="female" v-model="v4">
哇塞：<input type="checkbox" name="hobbies" value="other" v-model="v4">
{{ v4 }}
    
                v4: ['male', 'female']

2. 斗篷指令

v-cloak属性

有vue属性的时候会直接被解析替换,没有vue环境时属性就是直接的属性{display: none; }

在style中写
[v-cloak] {display: none; }  

给div 标签添加 v-cloak属性

--------------------------------------------------------

<style type="text/css">
    [v-cloak] { display: none; }
</style>
<div id="app" v-cloak>
    {{ msg }}
</div>
<script src="js/vue.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            msg: "message"
        }
    })
</script>
<!-- 避免页面闪烁-->

3.条件指定 `v-if=‘布尔变量‘`

使用true或false来控制类属性的样式显示

v-show=‘布尔变量‘ 隐藏时，采用display:none进行渲染
v-if=‘布尔变量‘ 隐藏时，不再页面中渲染(保证不渲染的数据泄露)

        <div class="box r" v-show="is_show"></div>
        <div class="box b" v-if="is_show"></div>

`v-if=‘布尔变量‘ 家族`

隐藏时,不在页面中渲染(保证不渲染的数据泄露)

v-if
v-else-if
v-else

利用条件判断来指定变换图片颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .box {
            width: 200px;
            height: 200px;
        }

        .r {background-color: red}
        .b {background-color: blue}
        .g {background-color: green}
        
        .active {
            background-color: deeppink;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div>
        <button @click="page='r_page'">红</button>
        <button @click="page='b_page'">蓝</button>
        <button @click="page='g_page'">绿</button>
    </div>
    
    点击按钮高亮显示
    --------------------------------------------------
        
    <div>
    <button @click="page='r_page'" :class="{active: page === 'r_page'}">红</button>
    <button @click="page='b_page'" :class="{active: page === 'b_page'}">蓝</button>
    <button @click="page='g_page'" :class="{active: page === 'g_page'}">绿</button>
    </div>
    
    ------------------------------------------------
    
    <div class="box r" v-if="page === 'r_page'"></div>
    <div class="box b" v-else-if="page === 'b_page'"></div>
    <div class="box g" v-else></div>
</div>

</body>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el:'#wrap',
        data:{
            page:'r_page'
        }
    })
</script>
</html>

4. 循环指令 `v-for=" "`

v-for=‘ele in string|array|obj‘

循环时重要的在前面

字符串文本在前,索引在后
数组文本前,索引后
对象 value,key,索引

字符串

   info: 'good good study',
普通
        <i v-for="c in info">{{ c }} </i>
加索引
        <i v-for="(c, i) in info">{{i}}:{{c}}<br></i>

数组

   stus: ['Bob', 'Tom', 'Jerry'],
普通
        <div v-for="e in stus">{{ e }}</div>
索引
        <div v-for="(e, i) in stus">{{ i }}:{{ e }}</div>

对象

循环值value
        <div v-for="v in people">{{ v }}</div>
获取v,k,索引
        <div v-for="(v, k, i) in people">{{ i }} - {{ k }}:{{ v }}</div>


people: {
                name: '猴子',
                age: 36.7,
                sex: '女',
            },

嵌套使用

teas: [
                {
                    name: 'jason',
                    age: 73,
                    sex: '男',
                },
                {
                    name: 'egon',
                    age: 74,
                    sex: '男',
                },
                {
                    name: 'owen',
                    age: 17.5,
                    sex: '男',
                }
            ]
            
            
            
循环遍历的嵌套

<div v-for="tea in teas">
    <span v-for="(v, k, i) in tea"><span v-if="i !== 0"> | </span>{{ k }}:{{ v }}</span>
</div>

循环指令案例(留言板)

数组操作`splice`

unshift,push 首尾增
shift,pop 首尾删
数组操作最全方法 : splice(begin_index,count,...args)
```
从第begin_index位开始操作第count位,值是...args
```

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li:hover {
            color: red;
            /*鼠标样式*/
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model="comment">
        <button type="button" @click="send_msg">留言</button>
        <!--留言板界面-->
        <ul>
            <!--根据遍历的索引本身删除留言数据-->
            <li v-for="(msg,i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
        </ul>
    </div>
</body>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            comment:'',
            // 对数据库中的留言进行判断
            msgs:localStorage.msgs ? JSON.parse(localStorage.msgs) : [],

        },
        methods:{
            send_msg() {
                // 将comment添加到留言msgs数组中
                // unshift,push  首尾增  /  shift,pop   首尾删
                // this.msgs.push(this.comment)

                // 判断是否留言是否为空
                if (!this.comment) {
                    alert('请输入内容');
                    return false;
                }
                // 将留言添加到数组
                this.msgs.push(this.comment);
                // 将输入的内容清空
                this.comment = '';

                // 持久化 同步数据库
                localStorage.msgs = JSON.stringify(this.msgs);
            },

            // 删除留言
            delete_msg(index){
                // 从index开始删除1位
                this.msgs.splice(index,1);
                // 同步数据库
                localStorage.msgs = JSON.stringify(this.msgs);

    }
        }
    })

    // localStorage.arr=JSON.stringify([1,2,3]);
    // console.log(JSON.parse(localStorage.arr));
</script>
</html>

数据库

前台数据库

localStorage 永久存储
sessionStorage 临时存储(所属页面标签关闭后清空)

保存的时候需要使用JSON进行序列化处理

存储到arr中
    localStorage.arr=JSON.stringify([1,2,3]);
取值
    console.log(JSON.parse(localStorage.arr));

5. 成员

5.1 分隔符成员 `delimiters:["",""]`

修改插值表达式符号

delimiters:["[{","}]"]
会将插值表达语法重新设置

----------------------------------------------

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        {{ msg }}
        [{ msg }]
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message'
        },
        delimiters: ['[{', '}]'],  // 修改插值表达式符号
    })
</script>
</html>

5.2 过滤器成员 `{{ num | fn }}`

{{ num | fn }}
filters:{
    // 传入所有要过滤的条件,返回值就是过滤的结果
}

在filters成员中定义过滤器方法
可以对多个值进行过滤,过滤时还可以额外传入辅助参数
过滤的结果可以在进行下一次过滤(过滤的串联)

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
</head>
<body>
    <div id="app">
        <!--
        总结：
        1、在filters成员中定义过滤器方法
        2、可以对多个值进行过滤，过滤时还可以额外传入辅助参数
        3、过滤的结果可以再进行下一次过滤(过滤的串联)
        -->
        <p>{{ num | f1 }}</p>
        <p>{{ a, b | f2(30, 40) | f3 }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10,
            a: 10,
            b: 20,
        },
        filters: {
            // 传入所有要过滤的条件，返回值就是过滤的结果
            f1 (num) {
                console.log(num);
                return num * 10;
            },
            f2 (a, b, c, d) {
                console.log(a, b, c, d);
                return a + b + c + d;
            },
            f3 (num) {
                return num * num;
            }
        }
    })
</script>
</html>

5.3 计算属性成员 `computed`

computed :{
    计算属性被渲染时调用
    返回值是方法属性的值
}

弱类型语言,直接使用'+'来转换类型(字符串转整型)

computed 计算属性可以声明:方法属性(方法属性一定不要在data中重复声明)
方法属性必须渲染才会调用绑定的方法,方法属性的值就是绑定方法的返回值
绑定方法中出现的所有的变量都会别被监听,任何一个变化发生值更新都会重新触发绑定方法,从而更新方法属性的值

一般用来解决的问题:一个变量值与多个变量

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <input type="number" min="0" max="100" v-model="n1">
        +
        <input type="number" min="0" max="100" v-model="n2">
        =
        <button>{{ result }}</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            n1: '',
            n2: '',
            // result: 0,
        },
        /**
         * 总结：
         * 1、computed计算属性可以声明 方法属性（方法属性一定不能在data中重复声明）
         * 2、方法属性 必须在页面中渲染，才会启用绑定的方法，方法属性的值就是绑定方法的返回值
         * 3、绑定的方法中出现的所有变量都会被监听，任何一个变化发生值更新都会重新出发绑定方法，从而更新方法属性的值
         *
         * 一般用来解决的问题：一个变量值依赖于多个变量
         */
        computed: {
            result () {
                console.log('被调用了');
                n1 = +this.n1;
                n2 = +this.n2;
                return n1 + n2;
            }
        }
    })
</script>
</html>

5.4 监听属性`watch`

监听属性不需要返回值

watch:{
    fn(n,o){   // 当前的值,上一次的值
        监听的属性每次更新都会回调监听方法
    }
}
$data 就是找成员

n是监听的属性当前值,o是其上一次的值,监听的属性每次更新都会回调监听方法

监听的熟属性需要需要在data中声明,监听的方法不需要返回值
监听的方法名就是监听的属性名,该属性值发生更新时就会回调监听方法
监听方法有两个回调参数:当前值,上一次的值

解决的问题,多个变量值依赖于一个变量值

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p>姓名：<input type="text" v-model="full_name"></p>
        <p>姓：{{ first_name }}</p>
        <p>名：{{ last_name }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '未知',
            last_name: '未知',
        },
        watch: {
            // n是监听的属性当前值，o是其上一次的值，监听的属性值每次更新都会回调监听方法

            /**
             * 总结：
             * 1、监听的属性需要在data中声明，监听方法不需要返回值
             * 2、监听的方法名就是监听的属性名，该属性值发生更新时就会回调监听方法
             * 3、监听方法有两个回调参数：当前值，上一次值
             *
             * 解决的问题：多个变量值依赖于一个变量值
             */
            full_name(n, o) {
                name_arr = n.split('');
                this.first_name = name_arr[0];
                this.last_name = name_arr[1];
            },
        }
    })
</script>
</html>

冒泡排序

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {

        }
    })
</script>
<script>

    let arr = [3, 2, 5, 4, 1];
    console.log(arr);

    // 冒泡排序
    // 3, 2, 5, 4, 1

    // 2, 3, 4, 1, 5
    // 2, 3, 1, 4
    // 2, 1, 3
    // 1, 2
    for (let i = 0; i < arr.length - 1; i++) {  // 外层循环控制趟数
        for (let j = 0; j < arr.length - 1 - i; j++) {  // 内存循环控制比较次数
            if (arr[j] > arr[j + 1]) {
                let temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    console.log(arr);


    stus = [
        {
            name: 'Bob',
            grade: 98
        },
        {
            name: 'Tom',
            grade: 87
        },
        {
            name: 'Jerry',
            grade: 92
        },
    ];
    // 按照分数进行排名
    for (let i=0; i<stus.length-1; i++) {
        for (let j=0; j<stus.length-1-i; j++) {
            // 处理条件即可
            if (stus[j].grade > stus[j + 1].grade) {
                let temp = stus[j];
                stus[j] = stus[j + 1];
                stus[j + 1] = temp;
            }
        }
    }

    console.log(stus);



</script>
</html>

课堂内容

## 表单指令

?```
v-model="变量"   变量与value有关
    普通:变量就代表value值
    单选框:变量为多个单选框中的某一个value值
    单一复选框:变量为布尔,代表是否选中
    多复选框:变量为数组,存放选中的选项value
?```

## 条件指令

?```
v-show      display:none
v-if        不渲染
v-if | v-else-if | v-else
?```

## 循环指令

?````
v-for="(vi) in str|arr"
v-for="(v,k,i) in dic"
?````

## 变量

?```
sessionStorage
localStorage
?```

## 分隔符

?```
delimiters:["",""]
可以修改符号
?```

## 过滤器

?```
{{ n1,n2 | f1(20) | f2 }}

filters:{
    f1(n1,n2,n3){ return }
}
?```

## 计算属性

?```
computed:{
    result(){
        // 一个方法属性值依赖于多个变量
    }
}
?```

## 监听属性

?````
watch:{
    full_name(n,o){
        this.first_name = n.split('')[0]
        
    }
}
?````

作业

技术图片

作业1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        <!--这是列表内容-->
        <tr v-for="(s,i) in scores">
            <td>{{ i+1 }}</td>
            <td v-for="(v,k) in s">{{ v }}</td>
        </tr>
    </table>
</div >
</body>
<script src="vue/vue.js"></script>
<script>
    let scores = [
             { name: 'Bob', math: 97, chinese: 89, english: 67 },
             { name: 'Tom', math: 67, chinese: 52, english: 98 },
             { name: 'Jerry', math: 72, chinese: 87, english: 89 },
             { name: 'Ben', math: 92, chinese: 87, english: 59 },
             { name: 'Chan', math: 47, chinese: 85, english: 92 },
            ];
    let all_s = [];
    // 给列表中的每个字典赋值总分属性
    for( s of scores){
        // 添加总分属性
        s.all_sco = s.math + s.chinese + s.english;
        // 重新获得列表套字典数据(多了总分)
        all_s.push(s);
    }
    // 根据总分冒泡排序
    for (let i =0;i<all_s.length-1;i++){
        for (let j=0; j<all_s.length-1-i;j++){
            if (all_s[j].all_sco< all_s[j+1].all_sco){
                let t= all_s[j];
                all_s[j] = all_s[j+1];
                all_s[j+1]=t
            }
        }
    }

    new Vue({
        el:'#app',
        data:{
            scores:all_s
        }
    });

</script>
</html>

作业2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>排名</th>
            <th>姓名</th>
            <th>数学</th>
            <th>语文</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
        <!--这是列表内容-->
        <tr v-for="(s,i) in scores" v-if="s.math>=60 & s.chinese>=60 & s.english>=60">
            <td>{{ i+1 }}</td>
            <td v-for="(v,k) in s">{{ v }}</td>
        </tr>
    </table>
</div >
</body>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            scores:[
             { name: 'Bob', math: 97, chinese: 89, english: 67 },
             { name: 'Tom', math: 67, chinese: 52, english: 98 },
             { name: 'Jerry', math: 72, chinese: 87, english: 89 },
             { name: 'Ben', math: 92, chinese: 87, english: 59 },
             { name: 'Chan', math: 47, chinese: 85, english: 92 },
            ]
        }
    });

</script>
</html>

技术图片

以上是关于1217 表单循环成员的主要内容，如果未能解决你的问题，请参考以下文章

Vue （表单斗篷条件循环指令，分隔符成员计算属性成员属性的监听vue组件子组件）

循环引用导致内存泄漏？

常用python日期日志获取内容循环的代码片段

使用从循环内的代码片段中提取的函数避免代码冗余/计算开销

分享几个实用的代码片段（第二弹）

1217 表单 循环 成员

今日内 容

1.表单指令 v-model=‘变量‘