Framework7 vue中的CSS选择器 [英] Css Selector in Framework7 vue

问题描述

我尝试使用vue.js和Framework7构建Cordova/Phonegap应用程序. 我发现如何使用html元素中的"v-on:click =" OnClick属性来使用诸如" onClick之类的功能.Framework7已在dom中实现了jquery.

i try to build an Cordova/Phonegap application using vue.js and the Framework7. I find out how to use functions like "onClick" using the "v-on:click="OnClick" attribute in an html element. Framework7 has jquery already implemented in the dom.

但是有一个问题.我如何直接访问dom，以便可以使用jquery选择器选择整个CSS类.喜欢: $('.likeButton'). ?

But there is one question. How can i access the dom directly, so that i can select whole css classes with the jquery selector. Like: $('.likeButton'). ?

在官方框架7中，我发现这样的东西可以访问具有其功能的dom:

In the offical framework7 i found something like this to access the dom with its functions:

this.$$ or this.Dom7

这是我已经在home.vue文件中写下的内容:

This is what i have already written down in the home.vue file:

    <script>


  //import Fonts-awesome Icons
  import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
  import {} from '@fortawesome/fontawesome-free-solid'
  import F7Icon from "framework7-vue/src/components/icon";
  import F7PageContent from "framework7-vue/src/components/page-content";
  import * as Framework7 from "framework7";

  export default {
    name: 'FAExample',

    components: {
      F7PageContent,
      F7Icon,
      FontAwesomeIcon
    },
    methods: {
      clickit: function () {
        console.log("hi");

        //this is what i have tested, looking if i have access to dom
        let $$ = this.$$;
        console.log($$);
      },
      //this is what i want to use
      $('.likebutton').on('click',function () {

  })
  }


  }


</script>

你们中的任何一个都知道这是如何工作的吗? 我希望你能帮助我.我是vue.js与framework7结合使用的新手.

Did any of you have an idea how this works? I hope you can help me. I'm new with vue.js in combination with the framework7.

感谢您的帮助:)

推荐答案

我们可以像使用DOM函数一样

We can use all the DOM functions just like

this.$$('.classname)

例如，如果您想通过jquery隐藏某些内容，则可以用作:

for example, if you want to hide something by jquery you can use as:

this.$$('.classname).hide()

要检查所有DOM功能，可以检查官方文档. https://framework7.io/docs/dom7.html

To check all the DOM functions you can check the official documentation. https://framework7.io/docs/dom7.html

但是请确保您的DOM函数不应在任何Window函数中. 如果您发现要实施的错误，只需先创建"this"实例即可.

But make sure that your DOM function should not in any Window function. If you get the error to implemented it, just make the 'this' instance first.

就像: var self = this;//此实例的全局变量 使用

Just like: var self=this; // a global variable with this instance use

self.$$('.classname).hide()

对于任何framework7帮助，只需在skyp上ping我一下即可:sagardhiman5_1

for any framework7 help, just ping me on skyp: sagardhiman5_1

这篇关于Framework7 vue中的CSS选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！