Vue3页面引入Jquery后，在JS代码中可以使用Jquery方法，但是在html代码中使用会报错？

  • Z时代
  • 2024-03-10
  • 分类：IT

下面代码在html中使用jquery会报错，调用引入的其他js中的方法也一样报错，应该咋解决
Uncaught TypeError: jQuery is not a function
vue版本是3.2.45

<body>
  <div id="app" v-cloak>
  <input id="aud" type="text" value="123"/>
  <!-- 这里使用会报错 -->
   <!-- {{jQuery('#aud').val()}}-->
  </div>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
  const {createApp} = Vue;
  const app = createApp({
      data() {
        return {}
      },
      methods: {},
      mounted() {
        //这里可以正常调用
        console.log(jQuery('#aud').val());
      }
  })
  app.mount('#app');
  </script>
</body>

回答：

解决了

app.config.globalProperties.$UD = $UD;
app.config.globalProperties.jQuery= jQuery

这样就可以直接在vue组件和html里使用了

回答：

在vue的template中使用变量必须是当前组件实例下可访问的属性，如this.xxx；jQuery是window下的变量，template中使用jQuery会报错，可以写成：

// 方法一：全局写法
Vue.protype.Jquery = Jquery 
// 方法二：局部写法
{
  computed: {
    Jquery () {
      return Jquery
    }
  }
}

回答：

用vue了，为什么还要引Jquery！
vue3，貌似js和ts都可以。
请问js什么事情做不到？

以上是 Vue3页面引入Jquery后，在JS代码中可以使用Jquery方法，但是在html代码中使用会报错？ 的全部内容， 来源链接： utcz.com/p/933257.html

回到顶部