相关文章推荐
睿智的楼房  ·  overflow-y: scroll - ...·  7 月前    · 
冷冷的板凳  ·  vue cli3.x ...·  1 年前    · 
骑白马的菠菜  ·  maven - ...·  1 年前    · 

在点击事件中能调用vue的方法。

博客:
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

1、innerHTML的内容如下

                                        str =`
                                            <div class="car_detail">
                                                <div class="car_detail_header">
                                                    <p>驾驶员:${content.drivername? content.drivername: ""}</p>
                                                    <p>车牌号:${content.carNumber ? content.carNumber : ""}</p>
                                                        <button  onclick="previewNvrVideo(1)">1号摄像头</button>

添加的button并设置了点击事件previewNvrVideo还传递了参数。

2、那么这个点击时的方法应该在哪里声明才能在该方法中调用vue中methods中的方法

在mounted函数中

    mounted() {
        let self = this;
        //模板参数传参
        const _this = this
        window.previewNvrVideo = function (channelNum) {
            _this.nvrPreview(channelNum);

3、然后就可以再Vue页面中调用methods中的nvrPreview方法了

    methods: {
        nvrPreview(channelNum){
                    场景在VUE页面中动态生成某个弹窗的innerHTML的内容。内容中添加一个button,并设置Button的点击事件,在点击事件中能调用vue的方法。注:博客:霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现1、innerHTML的内容如下                                        str =`                    
$(table tr).click(function() {//为表格的行添加点击事件
    var tr = $(this);//找到tr原色
    var td = tr.find(td);//找到td元素
    alert(td[0][removed]);//指定下标即可
今日项目需要用到取table选列的数据,网上资料发现都不能获取到选指定列的数据,通过分析测试后总结出以上代码,可以获取选行/列的数据。取td的数据不是.val(),也不是.html()。经过多次测试才发现是通过innerHTML()来获取内容,希
				
当需要动态插入元素,插入的元素往往添加class样式于onclick方法失效. 这种情况是因为插入之前class与js代码已被读取 所以这里就解决方案原理是插入元素的同给予它添加点击事件与内联样式 vessel.innerHTML = "<video style='width: 100%;height: 100%;background: #31313180;' class='camera-play'></video>"; document.querySelectorAll
ElementUI组件Notification自定义HTML createElement参考地址:https://www.cnblogs.com/vickylinj/p/9566474.html methods: { notify() { this.$notify({ title: '标题', position: 'right-bottom', dangerouslyUseHTMLString: true, message: this.$cr
若一个 input 框在 td里面,且此需要在 input 框后面加入一个文字描述,该如何避免input框和添加文字不在同一行的情况。 限制 Input 输入框的长度,在 input 加入 style="width: 55%;"进行限制即可。 &lt;script&gt; &lt;td class="font2 td_tiele_new" style="text-align:l...
vue直接将html字符串绑定到元素上显示的效果依旧是字符串,并不会转换为html代码。搞了一段间,用了一个组件然后使用dom操作,将 html字符串通过dom操作赋与div的innerhtml属性,但是这又引发了另一个问题,因为jquery操作dom与vue操作dom是异步的,导致jquery操作赋值html字符串的候,给错了对象,然后页面就gg思密达了---显示顺序错乱。 在 Vue ,如果在某个组件添加点击事件监听器,而该组件被销毁(即 `unmounted` 钩子被调用),通常需要手动移除该监听器,以避免潜在的内存泄漏和其他问题。 如果不手动移除监听器,当该组件被销毁,其监听器仍然存在于内存,可能导致以下问题: - 浏览器可能无法垃圾回收这些监听器,从而造成内存泄漏。 - 在某些情况下,当用户与其他组件或页面进行交互,可能会意外触发这些监听器,导致意外的行为或错误。 为了避免这些问题,建议在组件销毁手动移除事件监听器。在 Vue 3 ,可以使用 `removeEventListener` 或 `removeAllListeners` 方法来移除监听器。例如: ```vue <template> <div ref="myElement">Click me!</div> </template> <script> export default { mounted() { this.$refs.myElement.addEventListener('click', this.handleClick); unmounted() { this.$refs.myElement.removeEventListener('click', this.handleClick); methods: { handleClick() { console.log('Element clicked!'); </script> 在上面的例子,我们在组件的 `mounted` 钩子添加了一个点击事件监听器,并在 `unmounted` 钩子将其移除。这样,当组件被销毁,其点击事件监听器也将被正确地移除。