草庐IT

javascript - Vuejs 在复选框选择时切换 div 可见性

coder 2024-12-08 原文

我正在尝试使用 Vuejs 切换容器 div 的可见性 我尝试了以下两种方法，但都对容器的可见性没有任何影响。方法一:

<body>
    <div class="checkbox" id = "selector">
        <label><input type="checkbox" v-model="checked">Options</label>
    </div>
    <div class="container" id="app-container" v-if="checked">
        <p>Text is visible</p>
    </div>
<script src="path_to_/vue.js"></script>
<script>
    var app = new Vue({
        el: '#selector',
        data: {
            "checked": false
        }
     })
</script>
</body>

我知道 Vue.js 加载正常，勾选复选框对文本可见性没有影响。

方法二:

<body>
    <div class="checkbox" id = "selector">
        <label><input type="checkbox" v-on:click="seen = !seen">Options</label>
    </div>
    <div class="container" id="app-container" v-if="seen">
        <p>Text is visible</p>
    </div>
<script src="path_to_/vue.js"></script>
<script>
    var app = new Vue({
        el: '#selector',
        data: {
            "seen": false
        }
     })
</script>
</body>

同样，勾选复选框无效。有什么想法吗？

最佳答案

您必须使用 selector id 属性将 checkbox 元素包装在 div 元素中。

您正在创建的 vue 元素仅适用于包含 checkbox 的 div。

var app = new Vue({
        el: '#selector',
        data: {
            checked: false
        }
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
   <div id="selector">
    <div class="checkbox">
        <label><input type="checkbox" v-model="checked">Options</label>
    </div>
    <div class="container" id="app-container" v-if="checked">
        <p>Text is visible</p>
    </div>       
   </div>
</body>

关于javascript - Vuejs 在复选框选择时切换 div 可见性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42314118/

javascriptVuejs34ltgtvue-componentvue.js

有关javascript - Vuejs 在复选框选择时切换 div 可见性的更多相关文章

  1. ruby-on-rails - Ruby on Rails with Haml - 如何从 erb 切换 - 2

    我正在从erb文件切换到HAML。我将hamlgem添加到我的系统中。我创建了app/views/layouts/application.html.haml文件。我应该只删除application.html.erb文件吗？此外，仍然有/public/index.html文件被呈现为默认页面。我想创建自己的默认index.html.haml页面。我应该把它放在哪里以及如何使系统呈现该文件而不是默认索引文件？谢谢! 最佳答案 是的，您可以删除任何已转换为HAML的View的ERB版本。至于你的另一个问题，删除public/index/h

  2. ruby - 即时确定方法的可见性 - 2

    我正在编写一个方法，它将在一个类中定义一个实例方法；类似于attr_accessor:classFoocustom_method(:foo)end我通过将custom_method函数添加到Module模块并使用define_method定义方法来实现它，效果很好。但我无法弄清楚如何考虑类(class)的可见性属性。例如，在下面的类中classFoocustom_method(:foo)privatecustom_method(:bar)end第一个生成的方法(foo)必须是公共(public)的，第二个(bar)必须是私有(private)的。我怎么做？或者，如何找到调用我的cust

  3. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  4. ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2

    我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption

  5. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  6. ruby-on-rails - 在 Label 标签中嵌套 Ruby on Rails HAML 复选框 - 2

    我有以下不起作用的代码:=form_for(resource,:as=>resource_name,:url=>session_path(resource_name),:html=>{:class=>"well"})do|f|=f.label:email=f.email_field:email=f.label:password=f.password_field:password-ifdevise_mapping.rememberable?%p=f.label:remember_me,:class=>"checkbox"=f.check_box:remember_me,:class=>"

  7. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  8. ruby-on-rails - 嵌套形式的 HABTM 复选框 - 2

    我正在尝试以嵌套形式实现HABTM复选框。目前，我有3个模型。主题、类(class)和小组。协会如下:每个科目都有很多课。每节课都属于许多小组。现在，我正在尝试在单个创建和编辑表单上实现它们。这样一节课嵌套在主题中，每节课都有一个组复选框列表来实现HABTM关系。我在实现HABTM关系时遇到了麻烦，因为每个科目都有很多类(class)，而且我不确定如何区分不同的类(class)。为了进一步详细说明，我能够使嵌套表单正常工作，但我无法让HABTM复选框保存到正确的类(class)中。以下代码示例是我的HABTM复选框实现。目前，我已经使用“subject[lessons_attribut

  9. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  10. ruby - 是否可以动态检查方法可见性范围(私有(private)/公共(public)/ protected )？ - 2

    如thisanswer中所述，在Ruby2.1或更高版本中，此代码:classSimpleTestprivatedefine_method:foodo42endend将定义foo作为SimpleTest的私有(private)方法实例。(在Ruby2.0和更早版本中，它不会是私有(private)的。)但是，我希望做一些不那么琐碎的事情。我想定义一个类可以扩展的DSL，并希望DSL在内部定义的方法尊重调用上下文的私有(private)/protected可见性。这可能不是很清楚，所以这里有一个例子:moduleDsldefhas_a(name)define_methodnamedo42

随机推荐