vue2.5 2018 新手-》实践最好示例大神边黎安推荐

最新推荐文章于 2021-08-14 16:01:11 发布

大神边黎安

最新推荐文章于 2021-08-14 16:01:11 发布

阅读量215

点赞数

本文链接：https://blog.csdn.net/qq_26233519/article/details/83749580

版权

https://blog.csdn.net/qq_41933748/article/details/82729641

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性与侦听器</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">
    姓：<input v-model="firstName"/>
    名：<input v-model="lastName"/>
    <div>{{fullName}}</div>
    <div>{{count}}</div>
</div>
<script>
    new Vue({
        el:"#root",//el是vue实例与哪个DOM节点进行绑定,vue会替代DOM操作，主要是面向数据编程
        data:{
            firstName:'',
            lastName:'',
            count:0
        },
        // fullName放在computed里面表示它是一个计算属性
        // computed表示一个属性通过其他属性通过计算而来，只有依赖的属性发生变化才会发生改变，性能高
        computed:{
            fullName:function () {
                return this.firstName+' '+this.lastName
            }
        },
        // watch侦听器,侦听变化，一旦变化就执行其中的业务逻辑
        watch:{
            firstName:function () {
                this.count++
            },
            lastName:function () {
                this.count++
            },
            // 也可以把上面两个换成下面这一个
            fullName:function () {
                this.count++
            }
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性与侦听器</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="root">

    <!--当show为false时-->
    <!--v-if会移除标签-->
    <!--v-show会在属性中把display：none-->
    <!--v-show的性能高，不会销毁和重新创建DOM-->
    <!--v-if用在隐藏显示比较少的地方，性能会相对高些-->
    <div v-show="show" display="none">hello world</div>
    <button @click="handleClick">toggle</button>
    <ul>
        <!--item是来自list中的元素-->
        <!--需要在后面添加：key为了保证每一项数据都不相同-->
        <!--可以使用index下标来表示，每个值的下标肯定不一样-->
        <!--v-for用来循环显示出列表中的数据-->
        <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
</div>
<script>

    new Vue({
        el:"#root",//el是vue实例与哪个DOM节点进行绑定,vue会替代DOM操作，主要是面向数据编程
        data:{
            show:true,
            list:[1,2,2]
        },
        methods:{
            handleClick:function () {
                this.show=!this.show;
            }
        }
    })

</script>
</body>
</html>

大神边黎安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue2.5 2018 新手-》实践最好示例大神边黎安推荐

https://blog.csdn.net/qq_41933748/article/details/82729641&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;计算属性与侦听器&lt;/title&
复制链接

扫一扫