[英]Vue JS Conditional Rendering
我有一個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並從刀片服務器模板傳遞變量,但是如何在刀片服務器模板中將if設置為true。
例如 :
<icon path="{{url('img/admin/add.png') }}" name="" remove="remove"></icon>
不添加刪除邏輯。 如果可能,我該怎么做?
謝謝
要從組件中添加邏輯,首先需要將事件綁定到該組件中的元素,然后利用其中的methods
( 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
}
}
祝好運!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.