首页 > 其他分享 >vue 学习

vue 学习

时间:2023-09-12 14:12:32浏览次数:42  
标签:vue obj 修饰符 Vue 学习 set 事件

1.给对象动态添加属性和值

var obj={

     name:"jack",

     age:"18"

}

第一种:Vue.set(obj,'sex','18');

第二种:this.$set(this.obj, 'score', 90);

第三种:obj.score=100;

直接赋值的方式不能触发Vue的响应式系统。

如果我们需要在模板中使用动态添加的属性,建议使用Vue.set或$set方法

2.vue修饰符

事件修饰符:

在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。例如:

<my-component v-on:click.native="doTheThing"></my-component>

@click.stop 修饰符的元素,当它被点击时,事件将不会再向父级元素传递。这可以避免事件被不必要地多次触发。

v-model的修饰符
<1> .lazy
默认情况下,v-model同步输入框的值和数据。可以通过这个修饰符,转变为在change事件再同步。

<input v-model.lazy="msg">
1
<2> .number
自动将用户的输入值转化为数值类型

<input v-model.number="msg">
1
<3> .trim
自动过滤用户输入的首尾空格

<input v-model.trim="msg">
————————————————
版权声明:本文为CSDN博主「@柠稔」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/m0_64969829/article/details/122881221

标签:vue,obj,修饰符,Vue,学习,set,事件
From: https://www.cnblogs.com/mouthfulSweet/p/17648338.html

相关文章

  • Vue3中使用pinia全局状态管理库
    ❝本期介绍一下pinia在vue3中的简单使用,以及如何使用pinia实现多页面状态共享。❞什么是piniaPinia是一个用于Vue应用程序的轻量级状态管理库。与vuex的区别pinia是vue3的官方状态管理库,vuex是vue2的官方状态管理库pinia更加轻量级pinia能更好的配合Vue3与TSpinia的使用比Vuex简......
  • docker部署springboot+vue项目环境安装及部署流程
    后端项目打jar包修改及配置项1、修改配置文件application-prod.yml中的mysql配置和redis配置2、切换Maven为生产模式3、Maven打包4、拿到打包后的jar 包5、拿到jar包之后在Linux中使用nohupjava-jarjeecg-system-start-3.5.0.jar>catalina.out2>&1&命令即可启动项......
  • Ant Design Vue Table 嵌套子表格的数据刷新方法
    父子组件各自负责,在table中嵌套了子表格后,首次加载表格时,父组件会实例化子组件并传递参数,折叠后再次展开时,只会传递参数,子组件的数据刷新就属于子表格了。如@@@code<template#expandedRowRender="{record}"><originIndexs......
  • 使用ML.NET进行机器学习和数据挖掘
    当使用ML.NET进行机器学习和数据挖掘时,你可以创建自己的机器学习模型,用它来做预测或者数据挖掘任务。在这篇博客中,我将向你展示如何使用ML.NET来创建一个简单的分类模型,用于预测鸢尾花数据集中的花朵种类。我们将使用C#编写代码。步骤1:准备工作首先,确保你已经安装了.NETCore和ML......
  • vue-i18n
    https://kazupon.github.io/vue-i18n/zh/introduction.html开始如果使用模块系统(例如通过vue-cli),则需要导入Vue和VueI18n,然后调用Vue.use(VueI18n)。格式化在某些情况下,你可能希望将翻译呈现为HTML信息而不是静态字符串。在你的网站上动态插入任意HTML可能......
  • Vue2——监听页面滚动实现菜单和页面对应
    前言如题,监听页面的滚动并激活相应的菜单,一个老项目的维护,后面反正要全部重构,这里就先实现功能就好了;内容元素内容主要是添加相应的id,生成目录后直接通过锚点来跳转监听滚动window.addEventListener('scroll',()=>{constsections=document.getElementsByCla......
  • 基于深度学习的图像识别技术研究
    基于深度学习的图像识别技术是计算机视觉领域的一个重要研究方向,它已经在多个领域取得了巨大的成功。下面是关于这一技术研究的一些重要方面:1.卷积神经网络(CNNs): CNNs是深度学习中用于图像识别的基本工具。它们模拟了人类视觉系统的工作原理,通过一系列卷积和池化层来提取图......
  • Taro+vue3 关注抖音号
     Taro使用vue3或者react框架,data-aweme-id属性是不被解析到生成的页面代码中的,所以需要借助编译插件@tarojs/plugin-inject去注入标签属性;https://taro-docs.jd.com/docs/vue-overall#dataset业务页面:<buttonopen-type="openAwemeUserProfile":dataAwemeId="awemeId">关注......
  • Vue.js的index.html文件中引入JavaScript文件
    将js文件放在public文件夹下面在index.html文件下引入js文件在前面加<%=BASE_URL%>后面加路径,如果想将本地js文件打包之后也放在static/js文件夹下,需要在public文件夹下创建一个和打包之后文件放的位置一样的文件夹<scriptsrc="<%=BASE_URL%>./static/js/js文件名"></sc......
  • 关于在vue里面使用导航栏需要注意的事项
    1、右侧内容的显现右侧内容由el-main标签包围,需要在里面填上:内容才能成功显现!2、路由所在不仅仅要在APP.vue里面放路由:还要在Index.vue里面放置:初学小白找这个错误找了好久!......