1217 表单 循环 成员

目录

  • 今日内 容

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

      • 1.1 数据的双向绑定
      • 1.2 单选框
      • 1.3 单一复选框
      • 1.4 多复选框
    • 2. 斗篷指令
    • 3.条件指定 v-if=‘布尔变量‘
      • v-if=‘布尔变量‘ 家族
    • 4. 循环指令 v-for=" "
      • 数组操作splice
      • 数据库
    • 5. 成员
      • 5.1 分隔符成员 delimiters:["",""]
      • 5.2 过滤器成员 {{ num | fn }}
      • 5.3 计算属性成员 computed
      • 5.4 监听属性watch
    • 冒泡排序
  • 课堂内容
    • 作业

今日内 容

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>

原文地址：https://www.cnblogs.com/fwzzz/p/12057021.html

时间： 2024-10-07 22:59:25

1217 表单 循环 成员的相关文章

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

表单指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>表单指令</title> </head> <body> <div id="app"> <form action=""> <!--属性指令:v-model=

表单、条件、循环指令，分隔符，前端数据库，过滤器，计算属性，监听属性，冒泡排序

目录 一. 表单指令 1. v-model = "变量" (1)普通input框 (2)单选input框 (3)单一复选input框 (4)多复选input框 2. 实例 二.条件指令 1. v-show="布尔变量" 2. v-if="布尔变量" 3. v-if v-else-if v-else 4. 实例 三.循环指令 1. v-for="变量 in 可迭代对象" (1)遍历字符串或数组 (2)遍历对象(字典) 2. 实例

[elementUI]v-for动态数据循环表单验证的处理方式

最近被<哪吒之魔童降世>的主题曲洗脑了,哈哈哈里面有一句歌词是这样的 风跟着我飞有两道火光,天上海里的神仙能耐我何妨 从不拘泥任何世俗凡人的目光,我要奔向前方那光芒 表单验证的时候: prop改为:prop,形式为'formInlineList.'+index+'.formInline' formInlineList.'+index+'.formInline就是数据结构与数据 每一个循环中的<el-form-item>都需要加:rules 去rules时要取吧rules加上取全 结

用python模拟登录（解析cookie + 解析html + 表单提交 + 验证码识别 + excel读写 + 发送邮件）

老婆大人每个月都要上一个网站上去查数据,然后做报表. 为了减轻老婆大人的工作压力,所以我决定做个小程序,减轻我老婆的工作量. 准备工作 1.tesseract-ocr 这个工具用来识别验证码,非常好用. ubuntu上安装: sudo apt-get install tesseract-ocr 非常简单. 2.pytesseract和PIL(pillow) pytesseract用来在python中调用tesseract-ocr,PIL(pillow)用来加载图片,安装方法如下: pip3 in

使用jQuery.form插件，实现完美的表单异步提交

示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 抓住6月份的尾巴,今天的主题是 今天我想介绍的是一款jQuery的插件:Jquery.form.js 官网. 通过该插件,我们可以非常简单的实现表单的异步提交,并实现文件上传.进度条显示等等. 现在我们从一个ASP.NET同步表单提交开始,然后再将其转化为异步的表单提交.我写了3种表单提交示例,并简单分析了各种方式的利弊. 当然主题还是使用jQuery表单插件轻松实现表单异步提交以及分析下该插件的源码. ASP.NET服务

form表单那点事儿(上) 基础篇

做为html中最为常见,应用最广泛的标签之一,form常伴随前端左右.了解更深,用的更顺. 目录: 表单属性 表单元素 常识 模拟外观 表单属性 这个表单展示了form表单常用的属性 属性名 属性值 描述 action 一个url地址 指定表单提交到的地址 method `GET` , `POST` 表单将以此种方法提交到服务器 target `_self` 当前页面 `_blank` 每次在新窗口打开 `blank` 每次在同一个新窗口打开 `_parent` 父级frame `_top` 顶

表单验证&amp;lt;AngularJs&amp;gt;

经常使用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,仅仅要在输入字段元素上加入HTML5标记required就可以: <input type="text" required />   2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3.

JS采用ActiveXObject实现用户在提交表单时屏蔽敏感词的功能

本例中敏感词ciku.txt放在C盘根目录下,采用的ActiveXObject插件获取本地文件内容.使用此插件不需网上下插件,直接用如下js代码即可. 浏览器需修改interner安全选项的级别,启用ActiveX才能获取到代码中的ActiveXObject插件.如下图所示: js代码实现如下: 1 <script type="text/javascript"> 2 // -------------- 全局变量,用来判断文本域中是否包含脏词,默认为false,即不包含脏词-

html基础-移动字幕效果-from表单（5）

今天接着继续来,为大家准备了移动字幕效果和form表单,这么多天挺无聊的我为大家准备了点好玩的移动字幕效果. 一.移动字幕效果 <marquee direction="up(方向)" behavior="scroll(滚动方式)" scrolldelay="1000(滚动延迟)"></marquee>         direction(滚动方向)属性:down=下 up=上 left=左 right=右