从零开始学 Vue——总结笔记（二)

最新推荐文章于 2024-09-09 11:08:24 发布

一颗待收割的小白菜~

最新推荐文章于 2024-09-09 11:08:24 发布

阅读量111

点赞数

分类专栏： Vue 文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/lucky_ferry/article/details/120019398

版权

本文介绍了Vue.js中条件渲染的v-if和v-show，重点讲解了v-for列表渲染，包括key的作用以及Vue如何监测数据变化。此外，还提到了表单数据处理和v-model的修饰符，以及Vue的过滤器、内置指令和自定义指令的使用。

摘要由CSDN通过智能技术生成

一、条件渲染

条件渲染有两种方式：

v-if :v-if = '表达式' 表达式为真才展示特点：不展示的DOM元素直接移除
v-show v-show='表达式' 特点： 不展示的DOM仅仅是样式隐藏

二、列表渲染

1、v-for指令:

用来遍历并展示列表数据：可遍历数组、对象、字符串

<body>
    <div id="root">
        <h2>遍历数组</h2>
        <ul>
            <li v-for="(p,index) in persons" :key='index'>
                {
  {p.name}}--{
  {p.age}}
            </li>
        </ul>
        <h2>遍历对象</h2>
        <ul>
            <!-- 先收到的参数是值，再是属性名 -->
            <li v-for="(value,key) in car" :key='key'>
               {
  {key}}--{
  {value}}
            </li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001',name:'张三',age:18},
                {id:'002',name:'李四',age:19},
                {id:'003',name:'王五',age:20}
                ],
             car:{
                 name:'奥迪',
                 price:'70W',
                 color:'黑色'
             },
            }
    })
</script>

备注：

v-for 提供 key attribute是 Vue 识别节点的一个通用机制，在后期维护状态时是必要的

2、v-for中的key 的作用

为了给 Vue 一个提示，以便它能跟踪每个节点的

最低0.47元/天解锁文章

一颗待收割的小白菜~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从零开始学 Vue——总结笔记（二)

一、条件渲染条件渲染有两种方式：v-if :v-if = '表达式' 表达式为真才展示特点：不展示的DOM元素直接移除 v-show v-show='表达式' 特点：不展示的DOM仅仅是样式隐藏二、列表渲染1、v-for指令:用来遍历并展示列表数据：可遍历数组、对象、字符串<body> <div id="root"> <h2>遍历数组</h2> <ul> ...
复制链接

扫一扫

专栏目录