您的位置:首页 > 房产 > 家装 > 有限责任公司公司章程范本_破解软件库合集资料网址大全_网站生成app_域名注册信息怎么查

有限责任公司公司章程范本_破解软件库合集资料网址大全_网站生成app_域名注册信息怎么查

2024/10/30 6:54:35 来源:https://blog.csdn.net/samroom/article/details/143064377  浏览:    关键词:有限责任公司公司章程范本_破解软件库合集资料网址大全_网站生成app_域名注册信息怎么查
有限责任公司公司章程范本_破解软件库合集资料网址大全_网站生成app_域名注册信息怎么查

文章目录

    • 条件渲染
      • v-if
      • v-else
      • v-else-if
        • 代码
        • 效果展示
      • v-show
      • v-show对比v-if
        • v-if
        • v-show
        • 总结
    • 列表渲染
      • 复杂数据
    • 通过key管理状态
      • key的来源
    • 事件处理
      • 内联事件处理器实例
      • 方法事件处理器
    • 事件参数
      • 传递参数过程中获取`event`
    • 事件修饰符
    • 数组变化侦测
      • 变更方法
      • 替换一个数组
      • 合并两个数组实例
        • 代码
        • 效果
    • 计算属性
      • 计算属性缓存和方法(函数)的区别

条件渲染

  • 在Vue中,提供了条件渲染,这类似于javascript中的条件语句
    • v-if
    • v-else
    • v-else-if
    • v-show

v-if

  • v-if指令用于条件性地渲染一块内容,这块内容只会在指令的表达式返回真值时才被渲染。
    <div v-if="flag">你能看见我吗?</div>

v-else

  • v-else指令可以为v-if添加一个else区块
    <div v-else>那你还是看看我吧</div>

v-else-if

代码
<template>
<h3>条件渲染</h3>
<div v-if="flag">你能看见我吗?</div>
<div v-else>那你还是看看我吧</div>
<div v-if="type=='A'">A</div>
<div v-else-if="type=='B'">B</div>
<div v-else-if="type=='C'">C</div>
<div v-else>NOT A/B/C</div>
</template><script>
export default{data(){return {flag:true,type:"D"}}
}
</script>
效果展示

在这里插入图片描述

v-show

  • 另一个可以用来按条件显示一个元素的指令是v-show,用法与v-if基本一样

v-show对比v-if

v-if
  1. v-if是真实的按照条件渲染,因为它确保了在切换时,条件区块内的事件监听器和子组件都会被销毁与重建
  2. v-if也是惰性的:如果在初次渲染时条件值为false,则不会做任何事,条件区块只有当条件首次变为true时才会被渲染
v-show
  • 相比之下,v-show简单许多,元素无论初始条件如何,始终会被渲染,只有CSSdisplay属性会被切换。
总结
  • 总的来说,v-if有更高的切换开销,而v-show有更高的初始渲染开销。因此如果需要频繁切换,则使用v-show较好;如果在运行时绑定条件很少改变,则v-if会更合适。

列表渲染

  • 我们可以使用v-for指令基于一个数组来渲染一个列表,v-for指令的值需要使用item in items形式的特殊语法,其中items是源数据的数组,而item是迭代项的别名。

  • v-for也支持使用可选的第二个参数表示当前项的位置索引。

  • 也可以使用of作为分隔符来替代in,这更接近JavaScript的迭代器语法

    • 例如:<div v-for="item of items"></div>

复杂数据

  • 大多数情况,我们渲染的数据源来源于网络请求,也就是JSON格式

通过key管理状态

在这里插入图片描述

在这里插入图片描述

key的来源

  • 请不要使用index来作为key的值,我们要确保每一条数据的唯一索引不会发生变化。

事件处理

  • 我们可以使用v-on指令(简写为@)来监听DOM事件,并在事件触发时执行对应的JavaScript。

  • 用法:v-on:click="methodName"@click="handler"

  • 事件处理器的值可以是:

    1. 内联事件处理器:事件被触发时执行的内联JavaScript语句(与onclick类似)
    2. 方法事件处理器:一个指向组件上定义的方法的属性名或是路径。

内联事件处理器实例

<template><h3>内联事件处理器</h3><button @click="count++">Add</button><p>{{ count }}</p></template>
<script>export default {data(){return {count:0}}
}
</script>

方法事件处理器

<template>
<h3>方法事件处理器</h3>
<button @click="Addcount">Add</button>
<p>{{ count }}</p>
</template><script>
export default {data(){return {count:0}},
methods:{Addcount(){this.count = this.count+1}}
}
</script>

事件参数

  • 事件参数可以获取event对象和通过事件传递数据

  • Vue中的event对象就是原生JS中的event对象

传递参数过程中获取event

  • 如果传递event之前已经有了参数,那么需要再event之前加上一个$符号
    例如:
    • <p @click="getName(item,$event)" v-for="(item,index) in names :key="index">{{item}}</p>

事件修饰符

  • 在处理事件时调用event.preventDefault()或者event.stopPropagation()是很常见的,尽管我们可以直接在方法内调用,但如果方法能更专注与数据逻辑而不用去处理DOM事件的细节会更好。

  • 为了解决这一问题,Vue为v-on提供了事件修饰符,常用的有以下几个:
    1. .stop
    2. .prevent
    3. .once
    4. .enter

在这里插入图片描述

数组变化侦测

变更方法

在这里插入图片描述

替换一个数组

在这里插入图片描述

合并两个数组实例

代码

在这里插入图片描述

效果

在这里插入图片描述

  • 点击合并数组按钮后
    在这里插入图片描述

计算属性

  • 示例代码
    在这里插入图片描述

计算属性缓存和方法(函数)的区别

  • 计算属性:计算属性的值会基于其响应式依赖被缓存,一个计算属性仅会在其响应式依赖更新时才重新计算
  • 方法:方法调用总是会在重渲染时再次执行函数。

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com