Vue.js 权威指南学习笔记 — 计算属性、表单

最新推荐文章于 2025-07-23 18:21:11 发布

KoalaShane

最新推荐文章于 2025-07-23 18:21:11 发布

阅读量948

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： vue2 vue from

本文链接：https://blog.youkuaiyun.com/KoalaShane/article/details/79953290

Javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍Vue中计算属性的特性和使用场景，包括缓存机制、依赖更新原理及替代方案。同时涵盖表单控件的基础用法，如文本框、复选框、单选按钮和下拉列表的双向数据绑定。

计算属性

1、计算属性就是当其依赖属所以，如果不用缓存的话，可以用方法（methods）代替。性的值发生变化时，这个属性的值会自动更新，与它相关的DEMO部分也会同步自动更新。

 2、计算属性是基于它们的依赖进行缓存的，书中关于关闭缓存cache:false 属性在Vu2中被移除。

 3、计算属性只有在它的相关依赖发生改变时才会重新求值。

 4、v-repeat 在Vue2中移除。

总结：在需要做大量的计算，处理复杂的逻辑业务时，可以使用计算属性避免多次执行的getter，所以，如果不用缓存的话，可以用方法（methods）代替。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <link rel="stylesheet" href="style.css">
    <style>
        [v-cloak] {
            display: none;
        }
        
        .mt5 {
            margin-top: 50px
        }
    </style>
</head>

<body>
    <h2>计算属性</h2>
    <h3>计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。</h3>
    <div id="example">
        <input type="text" v-model="didi">
        <input type="text" v-model="family">
        <br>
        <p>
            didi = {{didi}},family = {{family}},didiFamily = {{didiFamily}}
        </p>

        <div class="mt5">
            <h2>计算属性getter不执行的情景</h2>
            <h3>当包含计算属性的节点被移除，并且模板中没有其他地方引用时，对应的getter方法不会执行</h3>
            <button @click='toggleShow'>Toggle show total Price</button>
            <!-- 一直出现在模板中， 不会条件性隐藏 -->
            <p v-cloak>{{totalPrice}}</p>
            <p v-if="showToal">Total Price = <span v-cloak>{{totalPrice}}</span></p>

        </div>
        <div class="mt5">
            <del>v-repeat 已经废除 </del>
        </div>
    </div>
</body>

<script>
    var vm = new Vue({
        el: '#example',
        data: {
            didi: 'didi',
            family: 'family',
            showToal: true,
            basePrice: 100
        },
        computed: {
            didiFamily: {
                // 一个计算属性的getter
                get: function() {
                    // 'this' 指向 vm 实例
                    return this.didi + this.family
                },
                // 一个计算属性的setter
                set: function(newVal) {
                    var names = newVal.split('')
                    this.didi = name[0]
                    this.family = names[1]
                }
            },
            totalPrice: function() {
                return this.basePrice + 1
            },
            fulltext: function() {
                return 'item' + this.text
            }

        },
        methods: {
            toggleShow: function() {
                this.showToal = !this.showToal
            }
        }

    })
</script>

</html>

Demo地址：https://github.com/koalashane/vuejs-code/tree/master/chapter4

官方API地址：https://cn.vuejs.org/v2/guide/computed.html

表单

表单主要使用v-model进行值绑定。

如果项目是使用Vue和iView进行开发时，在使用DatePicker 组件时，绑定使用on-change，使用v-model获取的值总是少一天。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>表单控件绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="example">
        <h2>表单的基本用法</h2>
        <h4>1、text</h4>
        <p> Welcom {{name}} join DDEE</p>
        <input type="text" v-model="name" placeholder="join DDEE">

        <div class="checkbox">
            <h4>2、checkbox</h4>
            <form>
                <input type="checkbox" id="flash" value="flash" v-model="bizLines">
                <label for="flash">快车</label>
                <input type="checkbox" id="premium" value="premium" v-model="bizLines">
                <label for="premium">专车</label>
                <input type="checkbox" id="bus" value="bus" v-model="bizLines">
                <label for="bus">巴士</label>
            </form>
            <p>选中的数据是: <span v-cloak>{{ bizLines | json}}</span></span>
            </p>
        </div>

        <div class="radio margin-top-4">
            <h4>3、radio</h4>
            <form>
                <input type="radio" id="flash" value="flash" v-model="radiomodel">
                <label for="flash">快车</label>
                <input type="radio" id="premium" value="premium" v-model="radiomodel">
                <label for="premium">专车</label>
                <input type="radio" id="bus" value="bus" v-model="radiomodel">
                <label for="bus">巴士</label>
            </form>
            <p>选中的数据是: <span v-cloak>{{ radiomodel }}</span></p>
        </div>

        <div class="selsect margin-top-4">
            <h4>4、selsect</h4>
            <select v-model="selected" multiple>
                <option value="car" selected>汽车</option>
                <option value="book">书本</option>
                <option value="box">盒子</option>
            </select>
            <p>选中的数据是: <span v-cloak>{{ selected }}</span></p>
            <div class=" margin-top-4">
                <select v-model="selected2">
                    <option  v-for="item in options" :value="item.value" >{{ item.text }}</option>
                </select>
                <p>选中的数据是: <span v-cloak>{{ selected2 }}</span></p>
            </div>
        </div>
    </div>
</body>

<script>
    var vm = new Vue({
        el: '#example',
        data: {
            name: 'koalashane',
            bizLines: [],
            radiomodel: '',
            selected: [],
            selected2: "",
            options: [{
                text: '红色',
                value: 'red'
            }, {
                text: '黑色',
                value: 'black'
            }, {
                text: '蓝色',
                value: 'blue'
            }]
        }


    })
</script>

</html>

Demo地址：https://github.com/koalashane/vuejs-code/tree/master/chapter5

官方API地址：https://cn.vuejs.org/v2/guide/forms.html

嗯，重要的话说三遍。