gpt4 book ai didi

javascript - Vue JS 条件渲染

转载 作者:行者123 更新时间:2023-12-03 06:20:58 28 4
gpt4 key购买 nike

我有一个 Icon.vue 文件,如下所示:

<template>
<div class="book-item Icon--container Icon--{{active}}">
<a href="{{slug}}">
<img v-bind:src="path" transition="fadein" class="img-responsive"/>
</a>
<template v-if="name">
<div class="info">
<h4>{{name}}</h4>
</div>
</template>
<template v-if="remove">
<div class="delete">
<a href="#">
<i class="fa fa-trash"></i>
</a>
</div>
</template>
<template v-if="edit">
<div class="edit">
<a href="#" class="cta purple">Edit</a>
</div>
</template>
<template v-if="view">
<div class="view">
<a href="#" class="cta purple">View</a>
</div>
</template>
</div>
</template>

<script>
export default
{

props:{
info: {},
remove: {},
edit: {},
view: {},
active: {default:'show'},
path: {default:''},
name: {default:'Icon name'},
slug: {default:'#'},
},
data: function() {
return {}
},
methods:{},
events: {},
ready:function(e)
{

},
created:function(e)
{

}

};
</script>

也可在 pastebin 上找到

正如您所看到的,其中存在以下一些逻辑:

  • 姓名
  • 删除
  • 编辑
  • 查看

我正在使用 Laravel 并从 Blade 模板传递变量,但是如何在 Blade 模板中将 if 设置为 true。

例如:

<icon path="{{url('img/admin/add.png') }}" name="" remove="remove"></icon>

不添加删除逻辑。如果可能的话,我该如何去做?

谢谢

最佳答案

要首先从组件添加逻辑,您需要将事件绑定(bind)到该组件中的元素,然后利用其中的方法 ( https://vuejs.org/guide/events.html )。

模板应类似于:

<icon 
path="{{url('img/admin/add.png') }}"
name=""
v-on:click="remove"></icon>

在脚本内部:

methods: {
remove: function () {
// Do something to remove
}
}

祝你好运!

关于javascript - Vue JS 条件渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38872587/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com