vue实用技巧

2024-09-04 16:59:16

复制链接

1965

vue

数组过滤器--filter

filter()是一个数组方法，它会创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，且它不会对空数组进行检测，也不会改变原始数组。
在vue中的使用

    methods: {
        //筛选方法调用
        mySearch() {
             //这里调用方法时不能用括号调用
            this.arrShwo = this.arrList.filter(this.searchCondition);
        },
        // 筛选条件(将筛选逻辑写在这里)
        searchCondition(arr) {
              //arr是接收的参数，也就是调用函数的数组即 this.arrList
             return arr.keyWord == this.word;
        },
    },

vue组件中引入模拟数据

在开发过程中我们需要模拟后台请数据，这样会产生跨域请求问题，这里我们暂时不讲跨域。有时候我们会将模拟数据写在data中，这样就不会产生问题，相当于在js中定义了一个变量。那么问题来了，当我们的模拟数据很长的时候，写在组建里是不易阅读的，但有不想产生跨域问题，那么我们可以采取引用.js文件的方式来解决。

也就是说，在一个.js文件中定义一个变量，可以是数组，也可以是对象。再将它引入到组件内使用。

js中写法

export const test_data = [{
  name:'小明'，
  age:'18'
}]

组件内写法

//引入data.js文件
import {test_data} from '@/assets/js/data.js'
// 定义长量来代替.js文件内的数据使用
const dataList = {
    test_data
}

子组件引用父组件数据，并改变时，导致父组件数据发生改变

let son =  JSON.parse(JSON.stringify(father));

v-bind 绑定属性

v-bind用于绑定html标签属性，可简写为:属性名，这里我们重点书一下class和style

:class

1.当使用v-bind绑定class时，如果标签原本就是class时，它并不会改变原本的class，而是会添加进去。
2.绑定或添加多个类名，可使用数组的方式，

:class="[class1,classIf ? 'class2' : 'class3' ]"
>

可在data中定义classN的值,classIf是布尔类型，三元表达式，也可以使用 &&等逻辑表达式。
3.以对象形式绑定，当对象的value值为真时，则将对象的key值绑定在class上。对象可以写在数组里

:class="[{class1:ture},{class2:false}]" 
>

如果用v-bind绑定多个class ,只会识别第一个。

:style

v-bind绑定style的方式和:class类似。

div
  :style="[{width:'100px'},{height:divHeight},divStyle]"
>
div>

运营部

孙军玲1

已更新 793篇

他的主页

板块推荐

排行榜

用户协议

欢迎访问我们的网站！我们非常重视用户的隐私权和信息安全，因此制定了以下用户协议，以明确我们与您之间的关系以及您在使用本网站时应遵守的条款。请您仔细阅读并同意本协议的所有条款，以便您能够合法、安全地使用本网站。如果您不同意本协议的任何内容，请立即停止使用本网站。

服务说明：本网站是一个提供定制软件开发服务和在线找技术搭档的互联网平台。我们保留随时更改、更新或暂停本网站的权利。我们会尽力确保网站的正常运行，但对于因技术问题、系统维护或其他原因导致的网站暂时不可用，我们不承担任何责任。
用户注册：用户需要通过提供手机号、微信扫码和其他必要信息来注册一个账户。您有责任保护您的用户名和密码，不得将其透露给任何第三方。对于因您的用户名和密码被泄露而导致的任何损失或损害，我们将不承担责任。
用户行为规范：用户应遵守中华人民共和国相关法律法规，不得发布或传播违法信息、侵犯他人权益的内容。用户应对其发布的内容负责，并承担因发布不当内容而引起的任何法律责任。
版权声明：本网站所包含的所有文字、图片、音频、视频等素材的著作权均归本网站所有（会员用户上传的默认承诺为不侵权的合法自有技术成果，本网站审核信息后可展示，所有权不归本网站）。未经本网站书面许可，任何单位或个人不得以任何形式复制、转载、修改或传播本网站的任何内容。对于侵犯本网站知识产权的行为，将依法追究其法律责任。
免责声明：本网站不对因使用本网站而引起的任何直接、间接、偶然、特殊或后果性的损害承担责任。包括但不限于利润损失、数据丢失、业务中断等。
适用法律和争议解决：本协议的签订、履行、解释及争议解决均适用中华人民共和国法律。如发生争议，双方应首先协商解决；协商不成的，任何一方均有权向有管辖权的人民法院提起诉讼。
本协议的解释权归本网站所有。如有未尽事宜，本网站保留最终解释权。
本协议自用户点击“同意”或“接受”按钮时生效。

同意

隐私政策

欢迎访问我们的网站！我们致力于为您提供一个安全、可靠的在线环境。本隐私政策旨在说明我们在您使用我们的网站时如何收集、使用和保护您的个人信息。请仔细阅读以下内容，以了解我们的隐私政策。

信息收集

在使用我们的网站时，我们可能会收集以下类型的信息：

a) 个人识别信息：如姓名、电子邮件地址、电话号码等。 b) 非个人识别信息：如浏览器类型、操作系统、设备类型、IP地址等。 c) 用户行为信息：如访问页面、点击链接、搜索查询等。

信息使用

我们收集的信息将用于以下目的：

a) 提供、改进和个性化我们的服务。 b) 与您联系，回应您的询问和请求。 c) 发送您请求的或我们认为对您有帮助的信息。 d) 进行市场调研和分析，以改进我们的产品和服务。 e) 防止欺诈和其他非法活动。

信息共享

我们不会出售、出租或以其他方式与第三方共享您的个人信息，除非：

a) 获得您的明确同意。 b) 与可信赖的合作伙伴共享，以提供您请求的服务。 c) 根据法律要求或政府机关的要求。 d) 为保护我们的权利、财产或安全。

信息安全

我们采取合理的安全措施，以保护您的个人信息不受未经授权的访问、披露、更改或破坏。然而，请注意，没有任何一种电子存储方法是100%安全的。

Cookie和跟踪技术

我们的网站使用Cookie和类似的跟踪技术来收集有关您使用我们网站的信息。这些信息有助于我们分析和改进我们的网站，以及提供个性化的内容和广告。您可以通过浏览器设置拒绝接受Cookie，但这可能会影响您使用我们网站的能力。

第三方链接

我们的网站可能包含指向其他网站的链接。请注意，我们对其他网站的隐私政策和实践不承担任何责任。我们建议您在访问这些网站时查看其隐私政策。

隐私政策的变更

我们可能会不时更新本隐私政策。请定期查看此页面，以确保您了解我们对个人信息的最新政策。

联系我们

如果您对我们的隐私政策有任何疑问或建议，请通过以下联系方式与我们联系：

电子邮件：[wangye-101@163.com]

电话：+86-173-3019-6230

地址：中国石家庄市长安区吾悦广场2010室

感谢您的信任和支持！我们将竭诚为您提供更优质的服务。

同意