vue对象和函数

最新推荐文章于 2024-05-10 15:20:59 发布

你若盛开风景自来

最新推荐文章于 2024-05-10 15:20:59 发布

阅读量1.1k

点赞数

分类专栏： es6 文章标签： vue对象和函数

本文链接：https://blog.csdn.net/li1484155613/article/details/101916326

版权

es6 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、外部调用变量和函数
（1）通过$data获取
（2）通过实例化就可以获取

<script src="vue.js"></script>
    <script>
        window.onload=function fun(){
            var value={a:1,b:2}
            var v=new Vue({
                data:value
            })
            alert(v.$data.a)
            alert(v.b)
        }
        
    </script>

2、函数
（1）自定义函数
必须放在methods下面

var v=new Vue({
            el:"#app",//挂载点
            data:{//数据
                msg:"helloworld",
                url:"http://baidu.com",
                h1:"<h1>11111</h1>",
                show:true,
                student:"学生你好",
                leader:"领导你好",
                user:"用户你好",
                arr:["red","blue","yellow","pink","black"]
            },
            methods:{
                fun:function(){
                    alert(1111)
                }
            }
        })

（2）过滤器filters
为标签调用变量，执行内容的过滤，放在filters下面进行过滤
（3）计算器
（4）监听器

<!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">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
    <input type="text" v-model="msg">
    <span>{{msg|fun1}}</span>

    <input type="text" v-model="first">
    <input type="text" v-model="last">
    <h1>{{add}}</h1>

    <input type="button" value="加1" @click="count++">
    <h1>{{count}}</h1>
</div>
    <script>
        var vue=new Vue({
                el:"#app",
                data:{
                    msg:"11",
                    first:"你好",
                    last:"乔安",
                    count:1
                },
                // 过滤器
                filters:{
                    fun1:function(v){
                        return v.toUpperCase()
                    }
                },
                // 计算器
                computed:{
                    add:function(){
                        console.log(this)//Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
                        return this.first+this.last
                    }
                },
            })
            // 监听器
            vue.$watch("count",function(news,old){
                alert("新的值是:"+news+"旧的值是"+old)
            })
    </script>
</body>
</html>

你若盛开风景自来

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue对象和函数

1、外部调用变量和函数（1）通过$data获取（2）通过实例化就可以获取<script src="vue.js"></script> <script> window.onload=function fun(){ var value={a:1,b:2} var v=new Vue({ ...
复制链接

扫一扫

专栏目录