单击时如何用Vue.js隐藏元素?只有一个要隐藏的元素.
$('.button').click(function() { $('.hideme').hide(); );
但是Vue.js与此相当的是什么?
解决方法
首先,jQuery开箱即用.这是一个主要的区别.所以你必须初始化你的Vue组件或应用程序.您将该组件及其数据绑定到模板中的一个特定HTML标记.在此示例中,指定的元素是< div id =“app”>< / div>并通过el:#app进行定位.这将从jQuery中了解到.
之后,您声明一些保持切换状态的变量.在这种情况下,它是isHidden.初始状态为false,必须在数据对象中声明.
其余的是特定于Vue的代码,如v-on:click =“”和v-if =“”.为了更好地理解,请阅读Vue的文档:
> Vue实例https://vuejs.org/v2/guide/instance.html
>模板语法https://vuejs.org/v2/guide/syntax.html
>事件处理https://vuejs.org/v2/guide/events.html#Listening-to-Events
>条件https://vuejs.org/v2/guide/conditional.html
如果您想快速了解,我建议您按此顺序阅读.但请考虑阅读文档的全部或至少更长的部分以便更好地理解.
var app = new Vue({ el: '#app',data: { isHidden: false } })
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script> <div id="app"> <button v-on:click="isHidden = true">Hide the text below</button> <button v-on:click="isHidden = !isHidden">Toggle hide and show</button> <h1 v-if="!isHidden">Hide me on click event!</h1> </div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。