淘先锋技术网

首页 1 2 3 4 5 6 7

vue v show 例子

今天我们要讲的是Vue的v-show指令。该指令用于根据条件展示或隐藏元素。v-show的工作原理是简单的：根据表达式的真假值来控制元素的显示与隐藏。其实现方式是通过修改元素的CSS display属性。

下面我们来看一个v-show的使用例子，这个例子用来根据用户的登录状态来展示不同的内容。首先，我们需要定义一个Vue实例，并在其data属性中维护一个布尔类型的isLoggedin变量。该变量用于表示用户是否已经登录。然后我们可以在HTML模板中使用v-show指令，根据isLoggedin变量的值来展示或隐藏不同的内容。

Welcome back!
Please login:

在以上代码中，我们使用了v-show指令来控制两个

元素的显示与隐藏。第一个
展示用户已经登录的内容，第二个
展示用户还未登录的内容。在Vue的data属性中，我们定义了isLoggedin变量并初始化为false。这意味着在页面初始化时，第二个
会被显示出来，而第一个
会被隐藏。

接下来，我们需要实现login()和logout()这两个函数。login()函数用于模拟用户登录操作，并将isLoggedin变量的值设置为true。logout()函数则用于模拟用户退出操作，并将isLoggedin变量的值设置为false。

new Vue({
el: '#myApp',
data: {
isLoggedin: false,
username: '',
password: ''
},
methods: {
login: function() {
//simulate login process...
this.isLoggedin = true;
},
logout: function() {
//simulate logout process...
this.isLoggedin = false;
this.username = '';
this.password = '';
}
}
});

最后，我们需要通过如下代码引入Vue.js文件：