• Vue之绑定样式和渲染、收集表单数据、过滤器

    目录

    一、绑定样式和渲染

    1. 绑定样式

    绑定class样式

    绑定style样式

    2. 条件渲染

    v-if与v-else

    v-show

    3. 列表渲染

     key的使用

     二、收集表单数据

     三、过滤器

    一、绑定样式和渲染

    1. 绑定样式

    在应用界面,某个元素的样式是变化的，class/style绑定就是专门用来实现动态样式效果的技术

    绑定class样式

    ：class='xxx'

    • 表达式是字符串：'classA'
    • 表达式是对象：{classA:isA,classB:isB}
    • 表达式时数组：['classA','classB']
    • 字符串写法：适用于要绑定的样式类名不确定、名字也不确定
    • 数组写法：是用于要绑定的样式个数不确定，名字也不确定
    • 对象写法：适用于要绑定的样式个数都额定，名字也确定，但要动态决定用不用

    绑定style样式

     :style="{fontSize: xxx}"

    •         其中xxx是动态值

    ：style=“[a，b]

    • 其中a、b是样式对象
    • 可以是对象形式
    • 也可以是数组形式  

    2. 条件渲染

    条件渲染指令：v-if与v-else、v-show

    v-if与v-else

    写法

    •     v-if=“表达式”
    •     v-else-if=“表达式”
    •     v-else=“表达式”

    使用于切换频率比较低的场景

    特点：
        不展示的DOM元素直接被移除

    注意：

    •     v-if可以和：v-else-if、v-else一起使用，但要求结构不能被打断
    •      v-if与template配合使用可以不破坏布局

    使用v-if做条件渲染 

    1.   
    2.         <h2 v-if="false">欢迎来到{{name}}h2>
    3.         <h2 v-if="1 === 1">欢迎来到{{name}}h2>

     v-else和v-else-if

    要求结构不能被打断

    1. if="n === 1">Angular
    2. <div v-else-if="n === 2">Reactdiv>
    3. <div v-else-if="n === 3">Vuediv>
    4. <div v-else>哈哈div>

    v-if与template的配合使用  

    1.  
    2.         <template v-if="n === 1">
    3.             <h2>你好h2>
    4.             <h2>尚硅谷h2>
    5.             <h2>北京h2>
    6.         template>

    v-show

    写法：
            v-show=“表达式”

    适用于切换频率较高的场景


    特点：


    不展示的Dom元素未被移除，仅仅是使用样式隐藏掉

    1.        
    2.         <h2 v-show="false">欢迎来到{{name}}h2>
    3.         <h2 v-show="1 === 1">欢迎来到{{name}}h2>

    3. 列表渲染

    v-for指令

               用于展示列表数据


    语法：

        v-for=“（item，index） in xxx”    ：key=“yyy”


    可遍历：

          数组。对象、字符串（用的很少）、指定次数（用的很少） 

    1.  
    2.     <div id="root">
    3.         
    4.         <h1>姓名列表（数组）h1>
    5.         <ul>
    6.             <li v-for="(p,k) in persons" :key="k">
    7.                 {{p.name}}-{{p.age}}
    8.             li>
    9.         ul>
    10.         
    11.         <h1>汽车列表(对象)h1>
    12.         <ul>
    13.             <li v-for="(p,k) in cars" :key="k">
    14.                 {{p}}-{{k}}
    15.             li>
    16.         ul>
    17.         
    18.         <h1>字符串列表h1>
    19.         <ul>
    20.             <li v-for="(p,k) in str" :key="k">
    21.                 {{p}}-{{k}}
    22.             li>
    23.         ul>
    24.         
    25.         <h1>遍历次数h1>
    26.         <ul>
    27.             <li v-for="(p,k) in 6" :key="k">
    28.                 {{p}}-{{k}}
    29.             li>
    30.         ul>
    31.     div>
    32.  
    33.  
    1.  
    2.

     key的使用

    1. 虚拟DOM中key的作用：

    key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚          拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较

     2.对比规则：

    (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

           ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

           ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实                        DOM。

    (2).旧虚拟DOM中未找到与新虚拟DOM相同的key

            创建新的真实DOM，随后渲染到到页面。

    3. 用index作为key可能会引发的问题：

          1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:

              会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

          2. 如果结构中还包含输入类的DOM：

              会产生错误DOM更新 ==> 界面有问题。

     4. 开发中如何选择key?:

         1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

         2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，

             使用index作为key是没有问题的。

     

     二、收集表单数据


    若：则 v-model收集的是value值，用户输入的就是value值
    若： 则v-model收集的是value值，且要给标签配置value值
    若: 
            1. 没有配置input的value属性，那么收集的就是checked（布尔值）
            2. 配置input的value属性：
                1. v-model的初始值是非数组，那么收集的就是checked（布尔值）
                2. v-model的初始值是数组，那么收集的就是value组成的数组
                
    注意：
    v-model的三个修饰符：                 

    lazy:              失去焦点在收集数据                         

    number:          输入字符串转为有效的数字             

    trim:                 输入首位空格过滤，中间不过滤

     1. 若：则 v-model收集的是value值，用户输入的就是value值

     

     2. 若： 则v-model收集的是value值，且要给标签配置value值

     3. 若: 
            1. 没有配置input的value属性，那么收集的就是checked（布尔值） 
            2. 配置input的value属性：
                1. v-model的初始值是非数组，那么收集的就是checked（布尔值）
                2. v-model的初始值是数组，那么收集的就是value组成的数组

     

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <script src="js/vue.js">script>
    10. head>
    11.  
    12. <body>
    13.     <div id="root">
    14.         <form @submit.prevent="submit">
    15.             账号：<input type="text" v-model="accont"> <br><br>
    16.             密码：<input type="password" v-model="password"><br><br>
    17.             性别：
    18.             男 <input type="radio" v-model="sex" value="male">
    19.             女<input type="radio" v-model="sex" value="famale"> <br><br>
    20.             爱好：学习<input type="checkbox" v-model="hobby" value="study">
    21.             打游戏<input type="checkbox" v-model="hobby" value="game">
    22.             吃饭<input type="checkbox" v-model="hobby" value="eat"><br><br>
    23.             所属校区
    24.             <select v-model="address">
    25.                 <option value="">请选择校区option>
    26.                 <option value="beijing">北京option>
    27.                 <option value="shanghai">上海option>
    28.                 <option value="shenzhen">深圳option>
    29.             select><br><br>
    30.             其他信息：<textarea v-model="anther">textarea><br><br>
    31.             <button>提交button>
    32.         form>
    33.     div>
    34.  
    35.     <script>
    36.         Vue.config.productionTip = false;
    37.         new Vue({
    38.             el: '#root',
    39.             data: {
    40.                 accont: '',
    41.                 password: '',
    42.                 sex: '',
    43.                 hobby: [],
    44.                 address: '',
    45.                 anther: ''
    46.             },
    47.             methods: {
    48.                 submit() {
    49.                     alert("1");
    50.                 }
    51.             },
    52.         })
    53.     script>
    54. body>
    55.  
    56. html>

     三、过滤器

    定义
            对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
    语法：
            1. 注册过滤器：
                Vue.filter(name,callback) 或 new Vue{filters:{}}
            2. 使用过滤器：
                {{xxx  |   过滤器名}}  或 v-bind：属性 = “xxx |  过滤器名”
    备注：
            1. 过滤器也可以接受额外的参数，多个过滤器也可以串联
            2. 并没有改变原来的数据，是产生新的对应的数据

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <script src="js/vue.js">script>
    10.     <script src="js/dayjs.min.js">script>
    11. head>
    12.  
    13. <body>
    14.     <div id="root">
    15.         <h1>当前时间h1>
    16.         
    17.         <h3>{{fmTime}}h3>
    18.         
    19.         <h3>{{formatTime()}}h3>
    20.         
    21.         <h3>{{time | timeFormat }}h3>
    22.         
    23.         <h3>{{time | timeFormat | mySlice}}h3>
    24.     div>
    25.     <script>
    26.         Vue.config.productionTip = false;
    27.         // 过滤器全局使用方法
    28.         Vue.filter('mySlice', function (val) {
    29.             return val.slice(0, 4);
    30.         })
    31.         new Vue({
    32.             el: '#root',
    33.             data: {
    34.                 time: 1660641877002 //获取的时间戳
    35.             },
    36.             computed: {
    37.                 fmTime() {
    38.                     return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
    39.                 }
    40.             },
    41.             methods: {
    42.                 formatTime() {
    43.                     return dayjs().format('YYYY-MM-DD HH:mm:ss')
    44.                 }
    45.             },
    46.             //局部过滤器
    47.             filters: {
    48.                 timeFormat(val) {
    49.                     return dayjs(val).format('YYYY年MM月DD日 HH:mm:ss')
    50.                 },
    51.                 // mySlice(val) {
    52.                 //     return val.slice(0, 4);
    53.                 // }
    54.             }
    55.         })
    56.     script>
    57. body>
    58.  
    59. html>

  • 相关阅读:
    传来喜讯，优维又获奖了！！！
    4.12每日一题（通过全微分判断多元函数最大最小值）
    从油猴脚本管理器的角度审视Chrome扩展
    Verilog功能模块——读写位宽不同的异步FIFO
    git远程仓库的创建（养成好的习惯，小马教你提交代码到远程仓库中）
    VS Code配置matlab
    百度智能云创新业务部总经理李想：发挥AI企业科技创新优势 助力职业教育人才扬帆远航
    ggrep让多行日志-无处遁形！
    如何写出匹配Java方法注释的正则表达式
    ZIP文件怎么打开？值得收藏的3个方法！
  • 原文地址：https://blog.csdn.net/m0_53619602/article/details/126605479