- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我试图在 html 表格行 (vue.js) 上进行转换(动画)但没有成功。这是完整的例子
new Vue({
el: '#data',
data: {
items: [
{
data: 'd1',
more: false
},
{
data: 'd2',
more: false
},
]
}
});
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div class="container-fluid" id="data">
<br>
<br>
<table border="1" class="table table-bordered">
<thead class="thead-inverse">
<tr>
<th>anim</th>
</tr>
</thead>
<tbody>
<template v-for="item, k in items">
<tr>
<td><button @click="item.more = !item.more" type="button"
v-bind:class="[item.more ? 'btn-danger' : 'btn-primary']" class="btn">Show the hidden row</button></td>
</tr>
<transition name="fade" >
<tr v-bind:key="item" v-if="item.more">
<td><p >{{k + 1}} - {{item.data}}</p></td>
</tr>
</transition>
</template>
</tbody>
</table>
</div>
我希望隐藏的表格行在出现时应该在不透明度属性上出现过渡/动画,但什么也没有发生,我应该怎么做?这非常适用于另一个元素,例如 span 或其他元素。
最佳答案
所以,首先我想指出,如果您使用了字符串模板,那么您问题中的代码将按原样工作。
console.clear()
new Vue({
el: '#data',
template: `
<div>
<br>
<br>
<table border="1" class="table table-bordered">
<thead class="thead-inverse">
<tr>
<th>anim</th>
</tr>
</thead>
<tbody>
<template v-for="item, k in items">
<tr>
<td><button @click="item.more = !item.more" type="button"
v-bind:class="[item.more ? 'btn-danger' : 'btn-primary']" class="btn">Show the hidden row</button></td>
</tr>
<transition name="fade" >
<tr v-bind:key="item" v-if="item.more">
<td><p >{{k + 1}} - {{item.data}}</p></td>
</tr>
</transition>
</template>
</tbody>
</table>
</div>
`,
data: {
items: [
{
data: 'd1',
more: false
},
{
data: 'd2',
more: false
},
]
}
});
.fade-enter-active, .fade-leave-active {
transition: opacity 2s
}
.fade-enter, .fade-leave-to {
opacity: 0
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div class="container-fluid" id="data">
</div>
请注意,此示例中唯一的更改是我将 Vue 的模板转换为字符串,而不是在 DOM 中定义模板。这个单一更改起作用的原因是,当您使用“在 DOM 中”模板时,浏览器会在 之前解析 HTML,然后 Vue 将模板转换为呈现函数。当您使用 table
元素时,浏览器对于它们允许在表格内呈现的元素类型非常挑剔;通常,只有与表相关的元素(thead
、tbody
、tr
、td
等)。 transition
显然不是它与之相处的元素(虽然,有点令人惊讶的是,它不会阻塞 template
)。
但是,字符串模板永远不会被浏览器解析,它们会直接转换为渲染函数,因此它们将按照您编写的方式工作。所以我的第一个建议是,只使用字符串模板。
但是,如果您想继续使用 DOM 模板,我们需要对代码进行一些更改。首先,我们需要将过渡移动到浏览器满意的地方。对于表格,我们可以通过将其移动到 tbody
标记并使用 Vue 的特殊 is
指令轻松地做到这一点。其次,因为我们的过渡现在将应用于多个元素,我们需要将其切换到 transition-group
。
因为我们使用的是 transition-group
转换中的每个元素必须有一个键。因此,对于每一行,我们只需为该行添加一个键。
console.clear()
new Vue({
el: '#data',
data: {
items: [{
data: 'd1',
more: false
},
{
data: 'd2',
more: false
},
]
}
});
.fade-enter-active,
.fade-leave-active {
transition: opacity 2s
}
.fade-enter,
.fade-leave-to {
opacity: 0
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div class="container-fluid" id="data">
<br>
<br>
<table border="1" class="table table-bordered">
<thead class="thead-inverse">
<tr>
<th>anim</th>
</tr>
</thead>
<tbody name="fade" is="transition-group">
<template v-for="item, k in items">
<tr v-bind:key="`button-${item.data}`">
<td>
<button @click="item.more = !item.more"
type="button"
v-bind:class="[item.more ? 'btn-danger' : 'btn-primary']"
class="btn">Show the hidden row
</button>
</td>
</tr>
<tr v-bind:key="`detail-${item.data}`" v-if="item.more">
<td><p >{{k + 1}} - {{item.data}}</p></td>
</tr>
</template>
</tbody>
</table>
</div>
关于javascript - 表行上的 Vuejs 转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45720175/
我试图将我的 VueJS 组件中的某些内容发送到位于包含该组件的 html 页面中的函数。我是否遗漏了什么,或者这是不可能的? 在我的组件中作为方法: insert: function(){
完全遵循 docs的语言说明,我正在尝试以德语格式显示日期。相反,我仍然看到它是英文的:“12 Apr 2020”。 也尝试使用西类牙语,仍然得到“2020 年 4 月 12 日”。 我错过了什么吗?
我想从 Chart 对象访问 getValue 方法,但我得到的函数未定义。 import Vue from 'vue'; import C
我正在使用 laravel-vuejs 应用程序。当 vuejs 渲染 css 时,它会在 html head 中附加一些样式标签,如下图所示。有什么办法可以隐藏这个标签吗?我认为可以通过添加一些插件
我正在为 VueJS 创建一个加载栏插件,我想使用该插件控制 VueJS 组件(插件的一部分)的数据。 所以,最后我想做以下事情: 在 main.js 中包含插件 import VueLoadingB
如何使用 VueJs 和 VueJS-Router 为 Pimcore 进行扩展? 到目前为止,前端的 vuejs 没有任何问题……但我无法让 VueJs-Router 运行。 有人有在 pimcor
也许你可以成为我一天的救世主。 我正在尝试为我的扩展实现 vue-components。 我不能包含自定义 Vue.js 组件。我关注了https://pagekit.com/docs/develop
我是 Laravel 和 VueJS 的新手,对于困惑的代码提前深表歉意。 我一直在尝试制作一个注册表单,并将 VueJS 集成到 laravel 中以使其更具动态性。现在我一直在尝试使用 {{ }}
我想使用函数作为数据属性。这似乎在“works”数据属性的情况下工作得很好。但是我需要函数中的 this 上下文,以便我可以计算存储在 this.shoppingCart (另一个属性)中的值。 这可
我正在尝试从另一个方法调用一个方法,为此我使用了它。但是我的控制台导致我出错。 如何在 Vuejs 中调用另一个方法中的方法? 代码 methods: { searchLocations:
我已经使用 webpack_loader 创建了 Django 和 VueJS 集成项目。Django 在本地主机 8000 上运行,而 VueJS 在 8080 端口上运行。但是端口 8000 在控
我正在学习如何通过 udemy 类(class)制作单页应用程序,同时尝试做一个大学项目。问题是,在我的 Controller 中,我将数据库查询作为 json“alunos”发送到前端。现在,在 V
我有一个带有一些 html 的#app 容器,我在#app 上创建了 Vue 实例,所有内容都被编译并转换为 Vuejs 组件。然后我在另一个 html 字符串中使用 ajax,我需要以某种方式将其编
我有一个 symfony 2.8 应用程序,我最近集成了 VueJs 2 作为我的前端框架,因为它提供了很大的灵 active 。我的应用程序不是单页的,我使用 symfony Controller
好吧,我遇到了一个问题,虽然是一个奇怪的问题,但我到处都找不到答案。 我们被指派用 Vue.js 创建一个购物车,我已经完成了我自己开始了这个项目,想看看我能用 vuejs 做什么。问题出现在页面加载
逻辑 我有带有输入作为标签的复选框,其值来自数据库,因此文本(值)已经存在。 (完成) 我想列一份检查项目 list (完成) 我想如果我改变了一个项目的值得到改变的值,但它仍然给我数据库的值(需要帮
我正在尝试在页面上显示公告列表(从 API 检索)。我正在使用 Vuex 商店,我有一个名为 announcements 的状态。我还希望每次用户刷新/进入页面时更新此列表。所以我使用了生命周期钩子(
使用单文件模板,我希望有一个按钮,如果数组为空,则显示“单击此处”,如果数组已填充,则显示值。 ajax 工作正常并且对象正在更新,但按钮不会重新呈现。我在这里做错了什么? Mobil
在 VueJS 中,有没有办法在模板或脚本中将字符串插入字符串?例如,我希望以下内容显示 1 + 1 = 2 而不是 1 + 1 = {{ 1 + 1 }}。 {{ myVar }}
我在我的项目中使用 VueJS 2,我意识到我的构建部署很糟糕。 这是我在 github 上部署我的 VueJS 构建的脚本: #!/usr/bin/env sh # abort on errors
我是一名优秀的程序员,十分优秀!