逍遥阁

vue自定义标签及数据的传递笔记

关键词: vue

vue自定义标签及数据的传递笔记

```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>code</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>

<script type="text/x-template" id="my-tag-html">
    <div>
        <p v-for="rs in component2">
            <span @click="methods1(rs.name)" :self="component1">
                <span>name:{{rs.name}}</span><br/>
                <span>age:{{rs.age}}</span><br/>
                <span>computed:{{computed1}}</span><br/>
                <span>filter:{{component1 | filters1}}</span>
            </span>
        </p>
    </div>
</script>

<div id="demo">
    <my-tag :attr1="vue1" :attr2="vue2"></my-tag>
</div>

<script type="text/javascript">
Vue.component('my-tag', {
    template: "#my-tag-html",
    props: {
        attr1: String,
        attr2: Array
    },
    data: function(){
        return {
            "component1": this.attr1,
            "component2": this.attr2
        };
    },
    computed: {
        computed1: function(){
            return "computed1";
        }
    },
    filters: {
        filters1: function(value){
            return parseInt(value)+900;
        }
    },
    methods: {
        methods1: function(value){
            alert('methods1:'+value);
        }
    }
});
</script>

<script type="text/javascript">
var demo = new Vue(
    {
        "el": "#demo",
        "data": {
            "vue1": "100",
            "vue2": [
                {
                    "name": "name1",
                    "age": 10
                },
                {
                    "name": "name2",
                    "age": 20
                }
            ]
        }
    }
);
</script>

</body>
</html>
```

admin
2017-02-08 18:56:16
javascript

文章分类

文章标签

文章归档

友情链接

vue自定义标签及数据的传递笔记