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

最新推荐文章于 2023-04-23 09:24:13 发布
最新推荐文章于 2023-04-23 09:24:13 发布
阅读量581 收藏 2
点赞数
分类专栏： 前端 Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53619602/article/details/126605479
版权
前端 同时被 2 个专栏收录
40 篇文章 3 订阅
订阅专栏
Vue
5 篇文章 0 订阅
订阅专栏

目录

一、绑定样式和渲染

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做条件渲染 

  <!-- 使用v-if做条件渲染 -->
        <h2 v-if="false">欢迎来到{{name}}</h2>
        <h2 v-if="1 === 1">欢迎来到{{name}}</h2>

 v-else和v-else-if

要求结构不能被打断

<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div>

v-if与template的配合使用  

 <!-- v-if与template的配合使用 -->
        <template v-if="n === 1">
            <h2>你好</h2>
            <h2>尚硅谷</h2>
            <h2>北京</h2>
        </template>

v-show

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

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


特点：


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

       <!-- 使用v-show做条件渲染 -->
        <h2 v-show="false">欢迎来到{{name}}</h2>
        <h2 v-show="1 === 1">欢迎来到{{name}}</h2>

3. 列表渲染

v-for指令

           用于展示列表数据


语法：

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


可遍历：

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


    <div id="root">
        <!-- 数组 -->
        <h1>姓名列表（数组）</h1>
        <ul>
            <li v-for="(p,k) in persons" :key="k">
                {{p.name}}-{{p.age}}
            </li>
        </ul>
        <!-- 对象 -->
        <h1>汽车列表(对象)</h1>
        <ul>
            <li v-for="(p,k) in cars" :key="k">
                {{p}}-{{k}}
            </li>
        </ul>
        <!-- 字符串 -->
        <h1>字符串列表</h1>
        <ul>
            <li v-for="(p,k) in str" :key="k">
                {{p}}-{{k}}
            </li>
        </ul>
        <!-- 遍历次数 -->
        <h1>遍历次数</h1>
        <ul>
            <li v-for="(p,k) in 6" :key="k">
                {{p}}-{{k}}
            </li>
        </ul>
    </div>




    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data: {
                persons: [
                    { id: '001', name: '张三', age: 18 },
                    { id: '002', name: '李四', age: 19 },
                    { id: '003', name: '王五', age: 20 }
                ],
                cars: {
                    name: '奥迪A8',
                    price: '70万',
                    color: '粉色'
                },
                str: 'nihao'
            }
        })
    </script>

 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是没有问题的。

 

 二、收集表单数据


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

lazy:              失去焦点在收集数据                         

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

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

 1. 若：<input type='text'>则 v-model收集的是value值，用户输入的就是value值

 

 2. 若：<input  type = "radio"> 则v-model收集的是value值，且要给标签配置value值

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

 

<!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>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="root">
        <form @submit.prevent="submit">
            账号：<input type="text" v-model="accont"> <br><br>
            密码：<input type="password" v-model="password"><br><br>
            性别：
            男 <input type="radio" v-model="sex" value="male">
            女<input type="radio" v-model="sex" value="famale"> <br><br>
            爱好：学习<input type="checkbox" v-model="hobby" value="study">
            打游戏<input type="checkbox" v-model="hobby" value="game">
            吃饭<input type="checkbox" v-model="hobby" value="eat"><br><br>
            所属校区
            <select v-model="address">
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
            </select><br><br>
            其他信息：<textarea v-model="anther"></textarea><br><br>
            <button>提交</button>
        </form>
    </div>

    <script>
        Vue.config.productionTip = false;
        new Vue({
            el: '#root',
            data: {
                accont: '',
                password: '',
                sex: '',
                hobby: [],
                address: '',
                anther: ''
            },
            methods: {
                submit() {
                    alert("1");
                }
            },
        })
    </script>
</body>

</html>

 三、过滤器

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

<!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>
    <script src="js/vue.js"></script>
    <script src="js/dayjs.min.js"></script>
</head>

<body>
    <div id="root">
        <h1>当前时间</h1>
        <!-- 计算属性做法 -->
        <h3>{{fmTime}}</h3>
        <!-- methods做法 -->
        <h3>{{formatTime()}}</h3>
        <!-- 过滤器 -->
        <h3>{{time | timeFormat }}</h3>
        <!-- 过滤器串联使用 -->
        <h3>{{time | timeFormat | mySlice}}</h3>
    </div>
    <script>
        Vue.config.productionTip = false;
        // 过滤器全局使用方法
        Vue.filter('mySlice', function (val) {
            return val.slice(0, 4);
        })
        new Vue({
            el: '#root',
            data: {
                time: 1660641877002 //获取的时间戳
            },
            computed: {
                fmTime() {
                    return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            methods: {
                formatTime() {
                    return dayjs().format('YYYY-MM-DD HH:mm:ss')
                }
            },
            //局部过滤器
            filters: {
                timeFormat(val) {
                    return dayjs(val).format('YYYY年MM月DD日 HH:mm:ss')
                },
                // mySlice(val) {
                //     return val.slice(0, 4);
                // }
            }
        })
    </script>
</body>

</html>

芋泥丶
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何让vue自定义组件可以包裹内容，并且渲染出来，以及组件的组合使用
weixin_30908707的博客
04-29 1584
当我们用vue一开始写项目时，按需求文档自定义了一个公用组件，这个组件很多地方都用到了，然后随着项目的推进，又有了新的需求要在里面加东西，但又不是所有的地方都要加 这时候我们想这样往里面塞内容↓ <my-template>是我们自定义的公共组件 <my-template> <h2>想加入一个子标题</h2> </my-...
Vue绑定样式，条件渲染，列表渲染
嘤嘤鸭的博客
10-19 290
Vue绑定样式，条件渲染，列表渲染
vue中的数据绑定
m0_64567550的博客
03-18 524
我们知道vue中的数据绑定当时有三种（1）v-bind（2）v-model（3）插值语法{{}}
VUE基本语法——样式绑定及渲染
ybb_ymm的专栏
04-23 562
当我们使用v-if的时候，元素可能会出现无法获取到的情况；但是，我们使用v-show的时候，则一定可以获取到元素。
解决使用原生表格table数据进行Vue的循环渲染时，对行或列进行合并的问题。
陈先生的博客
12-15 1711
因为涉及到数据的循环渲染，所以在渲染数据欠，我们首先要设计好数据的。在实际的开发场景下，有时候我们需要对表格的列或者行进行合并，通过对数据的归类处理，这样在循环的时候就可以解决合并的问题。把数据相同的进行归类，类似于以下的方式。
vue js es6 数组拼接成对象字符串传入后台,再把对象字符串转成数组进行页面渲染
周家大小姐
04-23 3276
我当前是做的一个文件上传功能为例,当时是两个角色共用一个页面,所以会出现两次ruleForm你们可以根据你们自己的需求来 数组拼接成字对象字符串: //声明变量 const attachments={} //对数组遍历 this.ruleForm.files.map((v,n)=>{ //对变量中的每个name属性进行赋值 attachments[v.name]=v...
vue 双向数据绑定的实现学习之监听器的实现方法
11-30
提到了vue实现的基本实现原理：Object.defineProperty() -数据劫持 和 发布订阅者模式（观察者），下面讲的就是数据劫持在代码中的具体实现。 1.先看如何调用 new一个对象，传入我们的参数，这个Myvue ，做了啥？ ...
Vue.js基础指令实例讲解（各种数据绑定、表单渲染大总结）
10-19
主要为大家详细介绍了Vue.js基础指令实例，各种数据绑定、表单渲染大总结，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
详细分析vue表单数据的绑定
10-15
主要介绍了vue表单数据的绑定的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
vue 标签属性数据绑定和拼接的实现方法
01-21
vue实例好后，给对象添加默认数据，列表加载成功。查看源代码，看看是否和心目中想的一样。当前还只是把初始化的默认数组展示出来，列表里面的操作，跳转还没有加，试着给初始化的数组添加id字段和数字 刷新一下，...
前端_Vue_4.类与样式绑定、条件渲染
三千幻想乡
12-13 380
在这种情况下我们可以在一个 元素上使用 v-if ，这只是一个不可见的包装器元素，最后渲染的结果并不会包含合格 元素。总的来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。对于只有一个根元素的组件，当你使用了 class attribute 时，这些class会被添加到根元素上，并与该元素上已有的class合并。和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。
vue中动态设置style样式和使用filters过滤器设置样式
诚的博客
07-29 1451
例如：想给图片增加高度和宽度 <el-image :class="classRotation" v-if="imageData.src !== undefined" :src="imageData.src" :style="imageStyle"> </el-image> //在data中声明 imageStyle data(){ return{ imageData:{}, imageStyle :{}, //样式...
【Vue 快速入门系列】样式绑定与条件渲染
一个非常Cool的人
10-16 535
在vue中好像一切数据都是可以动态的，那么我们应如何让dom元素中的样式动起来呢？我们既然可以改变dom元素的样式，我们能不能将其隐藏起来呢？今天将会介绍到Vue中如何将属性与dom元素的样式进行绑定，如何控制一个dom元素的显示与隐藏。
vue-02 模板数据绑定渲染
菜园子丶For丨丶Tomorrow的博客
02-22 131
可生成动态的HTML页面，页面中使用嵌入 Vue.js 语法可动态生成 1. {{xxxx}}双大括号文本绑定 2. v-xxxx以v-开头用于标签属性绑定，称为指令 双大括号语法{{}} 格式：{{表达式}} 作用： 使用在标签体中，用于获取数据 可以使用 JavaScript 表达式 一次性插值v-once 通过使用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新 输出HTML指令v-html 格式：v-html='xxxx' 作用： 如果是HTML
Vue数据渲染,绑定
weixin_52963481的博客
06-26 136
Vue数据渲染,绑定 Vue.js引入 //开发环境版本,包含有帮助命令行的警告 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> //生产环境版本，优化了尺寸和速度 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 数据绑定 <div id="app"> <h3>{{m
实验1：Vue开发基础
XGK8750的博客
11-19 3617
源代码：实验1（1）).rar-DNS文档类资源-CSDN下载 Web前端开发技术课程实验报告 实验1：Vue开发基础 姓名：_ __　_ ___ ___ 班级：_ _ _ ___　_ __　 学号：_ ____ ___ ___ 成绩：_ _ _ __　 一、实验目的： 掌握Vue开发环境的搭建、开发和调试工具的使用以及Vue项目的创建。 掌握Vue实例的创建及数据的绑定、Vue的事件监听操作、Vue组件的注册及组件之间的数据传...
Vue的v-model指令实现表单元素和数据的双向绑定
qq_40822274的博客
04-23 831
v-model指令实现表单元素和数据的双向绑定 1、v-model的原理 v-model其实就是一个语法糖。它的本质包含两个操作： 用v-bind绑定一个value属性 用v-on给当前元素添加一个input事件 <input type="text" v-model="message"> 等同于 <input type="text" :value="message" @input="message = $event.target.value"> 实例如下： <div id
表单数据绑定
qq_40052011的博客
10-17 345
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件： text 和 textarea 元素使用 value 属性和 input 事件； checkbox 和 radio...
表单标签库与数据绑定
qq_41193133的博客
03-08 922
表单标签库 表单标签库中包含了可以用在JSP页面中渲染HTML元素的标签。在JSP页面使用表单标签库时，需要在JSP页面开头处声明taglib指令： <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> form表单标签 form表单标签是渲染表单元素，具体语法格式： <form:fo...
vue3怎么渲染form表单数据
最新发布
06-01
在Vue 3中，要渲染form表单数据，可以使用Vue 3的Composition API来实现。首先，需要使用ref()函数创建一个响应式对象，用于存储表单数据。然后，在模板中通过v-model指令将表单元素和响应式对象绑定起来，实现双向...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值