vue 使用 jQuery

最新推荐文章于 2022-04-21 14:55:22 发布

545522390

最新推荐文章于 2022-04-21 14:55:22 发布

阅读量120

点赞数

文章标签： javascript vue

原文链接：https://www.cnblogs.com/cazj/p/10870624.html

版权

参考、转载地址：
https://www.cnblogs.com/cazj/p/10870624.html

下载jQuery
npm install jquery -S

2.引用
import $ from jquery //在需要使用的页面中

3.使用。要在DOM渲染后使用：

mounted() {      
     const that = this;  // 使用vue的data
     $(".jqClick").click(function(){
          console.log(that.jqAlertText); // 使用vue的data
     });      
}

整体代码：

<template>
    <div class="index footerUpdate" v-cloak>
       <div v-html="jqHtml"></div>
    </div>
</template>
<script>

import $ from "jquery";
export default {
    name: 'index',
    data() {
        return {
          jqHtml: ` <a href="javascript:;" class='jqClick'>jq点击</a>`,
          jqAlertText: `jqAlertText`,         
        }
    },
    methods: {

    },
    created() {
     
    },
    mounted() {      
       const that = this;
        $(".jqClick").click(function(){
          console.log(that.jqAlertText);
        });      
    }
}
</script>