Как поменять содержимое

Как я могу поменять содержимое div с Vue.js? Я думаю, что мне не хватает общих знаний о жизненном цикле. Вот что я получил до сих пор. В конце концов, мне нужно поменять местами между двумя экземплярами Vue и использовать только один контейнер для них.Как поменять содержимое

Вот что I've получил до сих пор: http://jsbin.com/qokerah/edit?html,js,output

HTML

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script> 

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 

    <script type="x-template" id="foo-template"> 
    <div class="text">{{ fooText }}</div> 
    <div class="confirm" v-if="fooConfirm">confirmed</div> 
    </script> 

    <script type="x-template" id="bar-template"> 
    <div class="heading">{{ barHeading }}</div> 
    <div class="info">{{ barInfo }}</div> 
    </script> 

    <div class="foo"> 
    <div class="btn btn-primary" v-on:click="swapLightboxContent">Open foo template</div> 
    </div> 

    <div class="bar"> 
    <div class="btn btn-primary" v-on:click="swapLightboxContent">Open bar template</div> 
    </div> 

    <div class="lightbox"> 
    <div class="lightbox-content">Show foo- or bar-template</div> 
    </div> 

</body> 
</html>

var foo = new Vue({ 
    el: '.foo', 
    data: { 
    fooText: 'text', 
    fooConfirm: false 
    }, 
    methods: { 
    swapLightboxContent: function() { 
     console.log('Show foo-template'); 
    } 
    } 
}); 

var bar = new Vue({ 
    el: '.bar', 
    data: { 
    barHeading: 'text', 
    barInfo: 'text' 
    }, 
    methods: { 
    swapLightboxContent: function() { 
     console.log('Show bar-template'); 
    } 
    } 
});

источник

2016-04-27 Kristo

Ok, мое главное заблуждение, где:

Я б уаг Foo и bar как новые экземпляры Vue() без родительского экземпляра «пересечения»

так что это теперь работает:

http://jsbin.com/tiwoco/edit?html,js,output

Еще нужно выяснить, если доступа пункт CurrentView через vmFoo и vmBar случаях shouldn't быть сделано в Foo и стержневых компонентов :)

источник

2016-04-28 03:46:26 Kristo

You может передать любое свойство вашему дочернему экземпляру с помощью '' – Jeff

Как поменять содержимое

ответ

Смежные вопросы