无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 公司新闻 >

桂林抖音微信小程序_vue完成添加标签demo示例代码

时间:2021-01-12 14:48来源:桂林抖音微信小程序 作者:jianzhan 点击:
vue完成加上标识demo实例编码 实际效果以下:htmldiv id="app" div span v-for="item in selectedItems" {{item.name}} i v-on:click="deleteSelectedItem($index)" /i /s
vue实现添加标签demo示例代码       本篇文章主要介绍了vue实现添加标签demo示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

效果如下:

html

 div id="app" 
 div 
 span v-for="item in selectedItems" {{item.name}} i v-on:click="deleteSelectedItem($index)" /i /span 
 input v-model="inputItem" type="text" v-on:focus="showDropmenu" v-on:keyup.enter="addItem" 
 /div 
 div v-show="isShowDropmenu" 
 button v-for="item in cataName" v-on:click="showCataList($index)" {{item.name}} /button 
 button v-on:click="hideDropmenu" i /i /button 
 div v-for="item in cataList" v-show="item.isShow" 
 span v-for="one in item.items" v-on:click="addByClick(one)" {{one}} /span 
 /div 
 /div 
 /div 

js

new Vue({
 el:'#app',
 data:{
 selectedItems: [{
 name: 'NodeJs'
 isShowDropmenu: false,
 inputItem:'',
 cataName:[{name:'开发语法'}, {name: '系统设备'}],
 cataList:[{
 isShow: true,
 items:['js','c++','java']
 isShow: false,
 items:['windows','chrome','linux']
 methods:{
 showDropmenu: function(event){
 console.log('showDropmenu');
 this.isShowDropmenu = true;
 hideDropmenu: function(event){
 this.isShowDropmenu = false;
 console.log('hideDropmenu');
 test: function(){
 console.log('test');
 addItem: function(){
 this.selectedItems.push({name: this.inputItem});
 this.inputItem = "";
 deleteSelectedItem: function(index){
 this.selectedItems.splice(index, 1);
 showCataList: function(index){
 var i = this.cataList.length;
 while(i--){
 i === index this.cataList[i].isShow = true: this.cataList[i].isShow = false;
 addByClick: function(name){
 var i = this.selectedItems.length;
 while(i--){
 if(this.selectedItems[i].name === name){
 return;
 this.selectedItems.push({name: name});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信