Vuejs改变视图

Posted 2023-02-22

【中文标题】Vuejs改变视图

【英文标题】：Vuejs change view

【发布时间】：2015-09-10 23:45:20

【问题描述】：

我正在尝试更改页面加载和点击事件的视图。

这是我目前所拥有的：

Vue.component('stale', 
    template: '#stale-template'
);

Vue.component('buying', 
    template: '#buying-template'
);

var vm = new Vue(
    el: '.slot-container',
    data: 
        currentView: 'stale'
    ,
    methods: 
        buyTemplate: function(e) 
            this.currentView = 'buying';
        
    
);

这是我的 html：

<div class="slot-container">
    <component is="currentView"
    v-transition="fade"
    transition-mode="out-in">
    </component>
</div><!-- END .SLOT-CONTAINER -->

<script id="stale-template" type="x-template">
    STALE
    <div class="slot stale">
        <div class="row">
            <div class="half">
                <div class="buy-icon" v-on="click : buyTemplate">
                    <img src=" Asset.to('img/exchange/buy-icon.png') "  />
                    <div class="title">Buy</div>
                </div>
            </div>
            <div class="half">
                <div class="sell-icon">
                    <img src=" Asset.to('img/exchange/sell-icon.png') "  />
                    <div class="title">Sell</div>
                </div>
            </div>
        </div>
    </div>
</script>

<script id="buying-template" type="x-template">
    BUYING
    <div class="slot buying">
        <div class="search">
            <form action=" url_to('exchange/search') " method="post" id="buy-search" class="dark">
                <input type="text" value=" input_old('item') " name="item" class="item-input" placeholder="Search item..." data-autocomplete=" url_to('search/item/autocomplete') " />
                <button type="button" class="exchange-search-btn">Search</button>
            </form>
        </div>
        <div class="results">

        </div>
    </div>
</script>

您可以在此处查看工作示例：http://jsfiddle.net/4vgjx61t/ 出于某种奇怪的原因，我一开始就无法开始任何事情。我正在按照此处找到的示例进行操作：http://vuejs.org/guide/application.html

谢谢。

【参考方案1】：

您使用的语法在 Vue 0.12 中有效，但在 Fiddle 中加载了 Vue 0.11。将此添加为外部资源以修复它：

https://raw.githubusercontent.com/yyx990803/vue/dev/dist/vue.min.js