vue系列教程:2.vue.js的第一个demo

时间:17-02-20 栏目:Vue 作者:zongyan86 评论:0 点击: 3,110 次

vue系列教程:

vue系列教程:1.为啥选择vue.js?

vue系列教程:2.vue.js的第一个demo


vue来实现这个功能还是很简单,您可以用v-if v-else v-show等指令

这边我们可以看到v-if和v-else是直接不显示dom。而v-show则是把dom的display设置成none。

@click是vue.js的事件触发方式,方法都写在method属性里面。

{{isShow}} 基于数据驱动的绑定方式。类似angular.js

el属性指定了dom绑定元素。

data属性是用来存放数据源的。

watch方法是来监听数据变化的。所以先alert处理isShow的新值和旧值,dom块才会显示和隐藏。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if、v-else、v-show</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-if="isShow">显示</p>
        <p v-else>隐藏</p>
        <p v-show="isShow">vShow实例</p>
        <button @click="fn()">改变 isShow:{{isShow}}</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                isShow: true
            },
            methods: {
                fn: function () {
                    if (this.isShow == true) {
                        this.isShow = false;
                    } else {
                        this.isShow = true
                    }
                }
            },
            watch: {
                isShow: function (newValue, oldValue) {
                    alert(" newValue:" + oldValue + "\n oldValue:" + newValue);
                }
            }
        });
    </script>
</body>
</html>

web开发分享



声明: 本文由( zongyan86 )原创编译,转载请保留链接: vue系列教程:2.vue.js的第一个demo

关注我们