vue系列教程:2.vue.js的第一个demo
zongyan86发表于 2017-02-20 03:28:03
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开发分享
| 您可能也喜欢： |
vue系列教程:1.为啥选择vue.js？
|
|
Node.js系列-Node.js简介
|
|
js继承
|
|
JS加密解密
|
|
Node.js系列-介绍一些神器
|
| 无觅 |
声明: 本文采用 BY-NC-SA 协议进行授权 | WEB开发分享
转载请注明转自《vue系列教程:2.vue.js的第一个demo》