问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何用vue框架去写以下代码？

头像
菜鸟也能高飞
    67467119

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- @好友框样式 -->
    <link rel="stylesheet" href="../dist/css/kindeditor-suggest.css"/>
    <script type="text/javascript" src="../dist/js/jquery.js"></script>
    <script src="../dist/js/kindeditor/kindeditor-all.js"></script>
    <!-- @好友功能 -->

    <script type="text/javascript" src="../dist/js/kindeditor/kindeditor-suggest.js"></script>

    <title>Document</title>
    </head>
    <body>
    <textarea id="editor_id" name="content"style="width:700px;height:500px;visibility:hidden;"></textarea>
    <script>

    KindEditor.create($("#editor_id"), {
  // 'height' : "65px",
  // 'width': '100%',
  'afterCreate' : function() {
    var _self = this;  
    var data = [{ 
      name:"全体成员", pinyin:'quantichengyuan'
    },{ 
      name:"刘亦菲", pinyin:'liuyifei'
    },{ 
      name:"高圆圆", pinyin:'gaoyuanyuan'
    },{ 
      name:"胡歌", pinyin:'huge'
    },{ 
      name:"张怡宁", pinyin:'zhangyining'
    },{ 
      name:"谢逊", pinyin:'xiexun'
    },{ 
      name:"白静", pinyin:'baijing'
    },{ 
      name:"海角", pinyin:'haijiao'
    },{ 
      name:"孙悟空", pinyin:'sunwukong'
    },{ 
      name:"八戒", pinyin:'bajie'
    },{ 
      name:"贾静雯", pinyin:'jiajingwen'
    },{ 
      name:"贾宝玉", pinyin:'jiabaoyun'
    },{ 
      name:"薛宝钗", pinyin:'xuebaochai'
    },{ 
      name:"阿一", pinyin:'ayi'
    }];
    
    $(_self).suggest('@', {
      data : data,
      mapkey : ['name','pinyin'],
      map : function(user) {
        return {
          value : user.name,
          text : '<small>' + user.name + '</small>'
        }
      }
    });
  }
});
</script>

    </body>
    </html>

    vue.js
    阅读 2.1k
    2 个回答
    得票最新
    头像
    yyccQQu
      3401087121

      引入vuejs文件
      <body id="abc">

      new Vue({
    el: '#abc',
    data: {},
    mounted() {
        this.keyup()
    },
    methods:{
        keyup(){
            KindEditor.create($("#editor_id"), {
  // 'height' : "65px",
  // 'width': '100%',
  'afterCreate' : function() {
    var _self = this;  
    var data = [{ 
      name:"全体成员", pinyin:'quantichengyuan'
    },{ 
      name:"刘亦菲", pinyin:'liuyifei'
    },{ 
      name:"高圆圆", pinyin:'gaoyuanyuan'
    },{ 
      name:"胡歌", pinyin:'huge'
    },{ 
      name:"张怡宁", pinyin:'zhangyining'
    },{ 
      name:"谢逊", pinyin:'xiexun'
    },{ 
      name:"白静", pinyin:'baijing'
    },{ 
      name:"海角", pinyin:'haijiao'
    },{ 
      name:"孙悟空", pinyin:'sunwukong'
    },{ 
      name:"八戒", pinyin:'bajie'
    },{ 
      name:"贾静雯", pinyin:'jiajingwen'
    },{ 
      name:"贾宝玉", pinyin:'jiabaoyun'
    },{ 
      name:"薛宝钗", pinyin:'xuebaochai'
    },{ 
      name:"阿一", pinyin:'ayi'
    }];
    
    $(_self).suggest('@', {
      data : data,
      mapkey : ['name','pinyin'],
      map : function(user) {
        return {
          value : user.name,
          text : '<small>' + user.name + '</small>'
        }
      }
    });
  }
});
        }
    }
 },

})
      头像
      JCat_李小黑
        5551518

        这个代码太乱了，我没看明白，但是既然你已经用jquery把demo写好了，那你可以试着在vue项目里面把jQuery引入，在mounted周期里面，然后直接用你这个代码就可以了。

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题