首页 > 其他分享 >Vue入门

Vue入门

时间:2024-02-03 18:23:34浏览次数:27  
标签:index Vue 入门 show money 绑定 item 属性

 CDN引入vue

vue常用指令

v-for 循环渲染

语法:v-for="(item,index) in items"

items:遍历的数组

item:遍历出来的元素

index:索引下标

v-bind  动态绑定

作用:为空间动态绑定属性值,href,css,etc

语法:v-bind:属性名=“属性值”

简化::属性名=“属性值”

 v-if    v-show    控制元素显示隐藏

原理不同:v-if  条件判断是否创建 / 移除,

v-show创建后条件判断是否显示 / 隐藏

v-on   为标签绑定事件

 等效于@click

<button v-on:click="money">钱</button>
<button @click="love">爱</button>

methods: {
   money:function(){
        alert("money+100")
   },
   love:function(){
        alert("爱你1万年")
   }
},

v-model    完成表单数据的双向绑定

 

标签:index,Vue,入门,show,money,绑定,item,属性
From: https://www.cnblogs.com/jiajianchengchu/p/18005033

相关文章

  • 轻松掌握Vue:一键导出PDF和Word文档的秘诀!
    适用业务需求:将当前页面显示内容导出pdf或者word文件实现思路:先将显示内容转成图片base64地址,再生成相应文件注意:显示内容直接转图片慎用::before、::after这些css,svg图标,不然可能出现生成的图片样式丢失问题,如果确实需要显示svg图标的话目前做法是转成png显示,如有更好方法,欢迎补充......
  • vue2.x的项目运行问题(export,set)
    Windows系统修改package.json文件:"scripts":{"serve":"setNODE_OPTIONS=--openssl-legacy-provider&&vue-cli-serviceserve","build":"setNODE_OPTIONS=--openssl-legacy-provider&&vue-cli-s......
  • [tornado]入门tornado(1): 项目结构
    学习资料tornado-bolierplate据说是一个适合新手入门的项目,但是已经是14年前的项目了,使用的tornado版本是3.2(而现在tornado已经到6.4了),所以这个项目对我来说更多是学习工作流程以及项目结构iwokhblog以及这一篇2020年的博客,时间稍微近一点本文主要是搞清楚一个torna......
  • vue实现v-html渲染的图片预览
    在v-html属性标签的标签上添加getImg方法<divclass="content"v-html="content"@click="getImg($event)"></div>getImg方法,通过$event可获取用户当前点击的元素相应的内容,这里可以获取所点击图片对应的src。判断拿到src后,添加图片的预览效果就可以了//点击查看图片co......
  • 如何运行vue项目
    如何运行vue项目1、首先,将项目里的“node_modules”文件夹删除,这是vue项目的依赖包。因为“node_modules”文件夹太大,一般不会打包上传到svn、git上的,所以没有这个文件夹就不用删。2、删除package-lock.json。package-lock.json记录了整个node_moudles文件夹的树状结构,还记录......
  • Python小白入门指南:从零开始掌握Python编程
    你是否曾想过用代码操控电脑、制作自动化任务,或者探索数据的奥秘?今天,我要带你进入Python的世界,为你揭开编程的神秘面纱。不论你是编程零基础,还是想学习一门新技能,这篇文章都将是你学习Python的得力助手。一、Python是什么?为什么要学Python?Python是一种高级、动态类型的编程语言,它的......
  • 一篇文章解决你的无线AP选型难题:从入门到精通
    无线网络覆盖项目中,无线AP的合理选型和部署非常重要。今天给大家安排。这篇文章,给你总结了6类典型的无线组网场所,针对每种场景的特点,给出相应的设备选型和部署的方案,同时整理了一些部署无线AP过程中容易忽略的细节,希望能给你日后组网提供一些帮助。01不同类型的AP,不同的使用环境不......
  • 算法入门:排序算法
    文章目录1.冒泡排序2.选择排序3.插入排序4.希尔排序5.归并排序6.快速排序7.堆排序 1.冒泡排序思想:比较相邻元素:从数组的第一个元素开始,比较相邻的两个元素,如果它们的顺序不对(比如前面的元素大于后面的元素),则交换它们的位置。一轮遍历:一轮比较和可能的交换后,最......
  • Vue中v-model的原理
    在Vue中,v-model是一个非常强大且常用的指令,它能够让我们轻松地处理表单输入和应用状态之间的双向绑定。它不仅简化了代码编写的过程,还提供了一种高效的方式来管理表单数据。理解v-model的原理对于构建复杂的Vue应用来说是非常重要的。在本文中,我们将深入探讨v-model的实现原理,并通......
  • 在Vue中如何动态绑定class和style属性
    在Vue中,动态绑定class和style属性是我们经常遇到的需求。这个功能允许我们根据不同的条件来动态改变元素的样式,让我们的应用更加灵活和富有交互性。在本篇博客文章中,我将带你深入探索在Vue中如何实现这一功能。首先,让我们了解一下Vue中的class绑定。Vue提供了一种简洁而强大的语法......