vuejs中v - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

vuejs之v-on

npm/vue/dist/vue.js"> v-on...:click="doIt"> v-on简写" @click="doIt"> v-on简写或者双击事件，会： ? 点击西红柿炒鸡蛋： ? 说明：v-on可以为标签绑定事件，语法：v-on:事件名="方法名" ，可以使用@事件名="方法名"进行简写。...说明：在html标签中使用v-on时，参数保持一致即可。在输入框中随便输入什么，按下回车键： ? 说明：v-on还可以使用各种各样的事件，具体可参考文档。

6112 0

vuejs之v-for

cdn.jsdelivr.net/npm/vue/dist/vue.js"> v-for...="(item, index) in arr"> 索引：{{index}}，值：{{item}} v-for...说明： v-for用于根据数据生成列表结构。数组常和v-for使用。语法是(item,index) in 数据。item是具体值，index是索引。 item和index可以结合其他指令一起使用。

5162 0

您找到你想要的搜索结果了吗？

是的

没有找到

vuejs之v-if

/head> v-if...="isshow">这是v-if内容 v-show="isshow">这是v-show内容 var app = new...说明：v-if和v-show都可以显示和隐藏相关内容，但是v-if是操作标签，而v-show是操作样式。对于频繁使用的内容可以使用v-show，否则使用v-if>

6261 0

vuejs之v-text

src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> v-text...="message">这里有内容 v-text="info + '!'"...说明：v-test会全部替换标签体里的内容，而且内部支持写表达式。

3391 0

vuejs之v-model

cdn.jsdelivr.net/npm/vue/dist/vue.js"> v-model...说明： v-model指令的作用就是便捷地设置和获取表单元素的值。绑定的数据会和表单元素值进行关联。其中一个改变都会导致另一个的改变。

4651 0

vuejs之v-show

/head> v-show...说明：v-show用于根据布尔值来进行相关标签的显示和不显示。这里的布尔值可以是利用表达式进行判断的。

3511 0

vuejs之v-bind

.active { border: 1px solid red; } v-bind...>测试内容 v-bind:class="isActive?'...active':''" @click="toggleActive">这是内容 v-bind:class="{active:isActive}">这是内容 v-bind就是给标签绑定属性。我们可以利用这一个特性，实现给标签加上事件之后改变属性。一般语法为：v-bind:属性名=“属性值”，可以简写为:属性名=“属性值”。...比如上面的： v-bind:class="isActive?'

3302 0

vuejs之v-html

src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> v-text...="message">这里有内容 v-html="message">这里有内容 v-html="content">这里有内容 v-html用于设置元素的innerHTML，当内容是普通文本时与v-text没区别，当内容是html结构时，则会对html进行解析。

7974 0

vuejs基础-v-for用法

v-for...="(item,ii) in arr">数据中标号第{{ii}}个的值是{{item}} v-for="(item2,ii2) in list">id:{{item2.id}},name...:{{item2.name}},序号是{{ii2}} v-for="(val,key,ii3) in user">key:{{key}},value是{{val}},序号是{{ii3...数字遍历从1开始 v-for循环的时候，key属性只能使用number获取string key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值在组件中，使用v-for循环的时候，或者在一些特殊情况中...，如果v-for有问题，必须使用v-for的同时，指定唯一的字符串/数字类型：key值 <!

5733 0

vuejs中缓存组件状态-keepAlive

前言在 vuejs中，我们经常需要缓存一些组件的状态，比如用户登录后，切换到其他页面，再切换回来，需要保留之前的登录状态，而不是重新登录。...-- 正则表达式 (需使用 `v-bind`) --> v-bind`),如果有多个,可以用一个数组 --> <

2251 0

VueJs中如何使用Teleport组件

比较常见的应用场景:就是全屏的模态框,控制元素的位置,也是可以处理的,但是比较麻烦在理想情况下,我们希望在具体的组件中,给元素绑定的事件,与具体要控制的DOM元素结构在同一个组件中,具体的位置处,保持一定的相关联性...而不用特意的把一些DOM结构给分离出去,然而,在同一组件中,触发模态框的按钮和模态框本身在同一组件中因为他们都与组件的开关状态有相关联,模态框与按钮一起渲染在应用DOM结构很深的地方,会导致模态框的...我是子组件打开模态框 v-if...click="isModel=true">打开模态框 v-if...,能够解决当组件嵌套层级很深,而后代组件中的模板,想要脱离当前组件结构,解决css布局层面的干扰,那就可以用这个teleport组件拓展官方示例 Teleport示例() https://cn.vuejs.org

2.3K2 0

VueJs中customRef函数的使用

内部结构需要自己去组装,实现而非直接从商城里购买,用一些现成的零部件组装一个类似精装的电脑,甚至还可以进行拓展,在实现一个定制化复杂的功能需求时这个自定义ref就很有用示例-延迟展示想要在input中实现一个数据的实时收集与实时展示...,需要使用v-model指令 v-model="keyword" /> {{keyword}} </template...ref函数,返回一个响应式数据现在不能用官方提供的ref函数,也就是自己要自顶一个类似ref函数,如下所示 v-model...} let keyword = myRef("itclanCoder"); // 自己定义一个ref 这个customRef比较难以理解的是,它需要在自定义ref函数中返回出去...，同时,接收一个工厂函数作为参数,这个工厂函数接受track和trigger两个函数作为参数,并返回一个带有get和set方法的对象一般来说,track()在get()方法中的返回值前进行调用,追踪一下数据的改变

1K3 0

VueJs中如何使用provide与inject

// 若是使用解构,则会丢失响应式,修改数据时,页面不会更新,具体解决,可以引入toRef或toRefs函数 const {name,website} = toRefs(person); 在孙组件中的模板即可以读取...,从父组件传递过来的数据也是支持响应式的 {{person.name}}---{{person.website}} 若使用解构时,则模板中可直接使用变量 {{name}}--{{website}}...基本上用第一种注入默认值的方式,使用是最多的,接收父组件提供传递过来的值总结 provide()与inject()的使用比较简单,就是解决跨组件间通信的一种方式,对于层级嵌套比较深的组件,若子孙组件想要使用父组件中的数据...那么就可以使用这种方式进行传递数据的,这在平时的一些业务开发中,还是有些用的,而在面试当中也是一个高频面试问题,怎么解决跨级组件,非父子组件通信

9112 0

VueJS 中更好的组件组合方式

VueJS 中有一些组合组件并复用逻辑的方法。在本文中，我将展示一种在 Vuejs (2.* 及 3.*) 中改进组合方式的方法。...下面，你可以看到一个实现了一种常规用例（从远端获取一个简单的数据并将其搭配不同的转场效果显示出来）的组件，尽管大部分逻辑及其相关的模版、数据和其它变量等与出现在其它地方或组件中的相同逻辑并无不同，它们还是出现在了该组件中... v-if="error"> An Error occured, please try again v-if="hasData"> {{ data... v-if="error"> An Error occured, please try again v-if="hasData"> {{ data...在这个例子中，我在 mounted 生命周期钩子中使用了 fetchData 函数，但其实你可以在期望的任意位置调用它。无论何时，被该函数求值或改变的结果都会反映在组件中，因为它们都是响应式属性。

1.3K2 0

Vuejs使用v-for指令实现九九乘法表

v-for指令参考Vuejs官网，里面关于v-for指令已经说得很清楚了。...v-for指令可以绑定数组的数据来渲染一个项目列表： v-for="todo in todos"> {{ todo.text...{ text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) 在浏览器中的显示效果如下所示...使用v-for指令实现九九乘法表在Vuejs中使用v-for指令实现九九乘法表很简单，对应的示例代码如下： <!...new Vue({ el: '#app', data: { num: 9 } }) 在HBuliderX中运行如下图所示

2.1K2 0

VueJS ajax

github: https://github.com/pagekit/vue-resource 4.2 axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中axios

2.9K5 0

vue笔记5 vueJS中的内置指令

用v-clock，会等vue实例编译结束后再去渲染vue --> v-cloak > {{msg}} v-once: v-once>...二、条件渲染指令 1、v-if, v-eles-if ,v-else 例子1 v-else和v-else-if都不会执行显示，v-if不成立，再依次执行v-else-if。...我就给你移除 v-show:v-show的元素永远存在也页面中，只是改变了css的display的属性 v-show的用法和v-if差不多:是否显现...vuejs监听键盘事件：如用keyup事件监听按键（1）keyup后面可以接指定的keyCode码，如13对应enter。

1.9K1 0

VueJS文档生成

安装jsdoc-vuejs插件 https://github.com/Kocal/jsdoc-vuejs npm install --save-dev jsdoc-vuejs 3....配置JSDoc 新建conf.json文件 { "plugins": [ "node_modules/jsdoc-vuejs" ], "source": { "includePattern...JSDoc语法文档 jsdoc-vuejs插件新增了以下几个块标签 @vue-prop @vue-data @vue-computed 用法和@param一样。 6.

1.9K2 0

Vuejs --01 起步

:title="messa">鼠标悬浮时显示title，此时title被Vue绑定了messa（v-表示他们是Vue提供的特殊属性） new Vue..."> v-if="seen">根据if是否为真判断是否可见，或者说是否运行此行代码 new Vue({ el:...message: '你好' } }); 五、组件化应用构建 //自定义组建 'item-list' ，并定义该组件包含：li模板（内容数据是自定义属性值中传过来的...） + 自定义属性props（包含属性名item（属性值从父级中通过v-bind传过来））---》完成了从父级中传值给子级即：自定义组件） v-for="key in dataList" v-bind:item="key" v-bind:key="key.id"> <

2K5 0

如何在Vuejs中实现页面空闲超时检测

如果在10秒的会话中没有任何操作，请自动注销用户。需求要在Vue应用程序中监听3秒钟的不活动状态，并显示带有10秒计时器的模态提示框。如果在10秒的会话中没有任何操作，请自动注销用户。...让我们将这个模态框组件导入到我们的App.vue文件中，并将其添加到我们的模板中。如果isIdle为true，则将显示该组件。...App.vue v-if="isIdle" /> 中。我们使用毫秒进行倒计时，并在计算属性中得到秒，以秒显示时间。...- {{isIdle}} v-if="isIdle"/> <script

3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭