vue 添加标签demo

mist14 发布于2019-08-20 13:52 / 2798人阅读

摘要：效果图在线演示地址开发语法系统设备

demo效果图

在线演示地址 http://wangduanduan.coding.me...

html



    {{item.name}} 
    


    

    
    
        {{one}}

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});
            }
        }
    });

GPU云服务器云服务器环信语音聊天vue demo vue 集成webrtc实时音视频demo 添加标签添加文件属性标签

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81292.html

从Nodejs脚本到vue首页看开源始末的DemoHouse

摘要：最近上看见了大漠的项目，看到说准备做一个首页，于是我的第一想法就是做一个列表页面，文件可以很容易的生成一个文件。对于不确定的情况下，我们不表明具体的协议，使用。最近上Github看见了大漠的DemoHouse项目，看到Issues说准备做一个首页，于是我的第一想法就是做一个md列表页面，md文件可以很容易的生成一个html文件。刚刚做好脚本文件，可以生成list.md。随后提了pr。...

Gemini 2019-08-22 10:39 评论0 收藏0
理解vue中的组件（一）

摘要：组件是中很重要，这部分也是最难理解的，先聊一聊中的组件。语法组件名选项对象来定义一个下拉框组件请选择北京上海杭州组件的名字就为，在模板中使用组件请选择北京上海杭州在模板中使用组件和正常标签一样。看了Vue的文档，写得很简洁，但是并不简单。在自己学习的过程中踩过不少的坑，学习的时候把官网的例子从头到尾做了一遍，记录在github中https://github.com/WYseven/v...

JasonZhang 2019-08-20 16:09 评论0 收藏0
Vue子组件与父组件之间的通信

摘要：子组件通过就可以接受到这个父组件传递的值。点击向父组件传值在父组件中的标签中监听该自定义事件，并添加一个响应该事件的方法。 1.环境搭建下载 vue-cli：npm install -g vue-cli 初始化项目：vue init webpack vue-demo 进入vue-demo文件夹：cd vue-demo 下载安装依赖：npm install 运行该项目：npm...

fredshare 2019-08-23 10:43 评论0 收藏0
Vue子组件与父组件之间的通信

摘要：子组件通过就可以接受到这个父组件传递的值。点击向父组件传值在父组件中的标签中监听该自定义事件，并添加一个响应该事件的方法。 1.环境搭建下载 vue-cli：npm install -g vue-cli 初始化项目：vue init webpack vue-demo 进入vue-demo文件夹：cd vue-demo 下载安装依赖：npm install 运行该项目：npm...

fish 2019-08-02 11:09 评论0 收藏0