vue.js技巧小计

最新推荐文章于 2022-10-14 10:06:18 发布

weixin_30929011

最新推荐文章于 2022-10-14 10:06:18 发布

阅读量106

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhujiasheng/p/7193744.html

版权

//删除数组索引方法01
del (index) { this.arr.splice(index ,1); }
//删除数组索引方法01
del (index) { this.$delete(this.arr, index); }

//获取输入框内容
<input type="text" v-model="message" @focus="$event.target.select()">

//子向父传递参数  this.$emit('hide');
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-demo</title>
    <link rel="stylesheet" href="src/dist/styles/iview.css">
    <script src="src/dist/vue.min.js"></script>
    <script src="src/dist/iview.min.js"></script>
</head>
<body>
    <div id="page">
        <my-dialog :is-show="isShow" @hide="toggle"></my-dialog>
        <i-button @click="toggle">显示切换</i-button>
    </div>
    <script src="src/components/text01.js"></script>
</body>
</html>

//js代码
//vue2.0 定义局部组件时  组件首字母要大写 vue1.0 大小写都支持
var Dialog = {
    template: '<div v-if="isShow">aaaaaaaaaaaaaa<i-button @click="toHide">子组件关闭</i-button></div>',
    props:['isShow'],
    methods:{
        toHide:function(){
           this.$emit('hide');
        }
    }
}

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

new Vue({
    el:'#page',
    data:{
        isShow:false
    },
    methods:{
        toggle:function(){
            this.isShow = !this.isShow;
        }
    },
    components: {
        'my-dialog': Dialog
    }
})

转载于:https://www.cnblogs.com/zhujiasheng/p/7193744.html

weixin_30929011

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js技巧小计

//删除数组索引方法01del (index) { this.arr.splice(index ,1); }//删除数组索引方法01del (index) { this.$delete(this.arr, index); }//获取输入框内容<input type="text" v-model="message" @focus="$event.target.selec...
复制链接

扫一扫