vue(计算属性表单控件)

最新推荐文章于 2024-06-23 22:49:22 发布

世间百态不过尔尔

最新推荐文章于 2024-06-23 22:49:22 发布

阅读量1.2k

点赞数

分类专栏： VUE 文章标签： vue(计算属性表单控件)

本文链接：https://blog.csdn.net/weixin_44706842/article/details/88602545

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、计算属性
在项目开发中，我们展示的数据往往需要经过一些处理， Vue.js中提供了computed属性，来避免在模板中加入过重的业务逻辑，保证模板的结构清晰和可维护性。
计算属性中，默认只有getter属性，需要时可以使用setter
二、表单控件
Vue.js中提供v-model的指令对表单元素进行双向数据绑定，在修改表单元素时，实例中对应的属性值也会同时更新，反之亦然。
绑定value:表单控件的值可以绑定在Vue实例动态属性上，用v-bind实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src = "vue.js"></script>
</head>
<body>
    <div id="app">
        {{ city }} <br>
        {{ school }} <br>
        {{ city + school }} <br>
        {{ address }}
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                city:"禹城",
                school:"大禹学院"
            },
            computed:{
                address:function(){
                    return this.city + this.school;
                }
            }
        })
    </script>
    <div id="app1">
        <input type="text" v-model = "price">
        <input type="text" v-model = "count">
        <input type="text" v-model = "total">
    </div>
    <script>
        var vm1 = new Vue({
            el:"#app1",
            data:{
                price:20,
                count:3
            },
            computed:{
                // total:function(){
                //     return this.price * this.count;
                // }
                total:{
                    get:function(){
                        return this.price * this.count;
                    },
                    set:function(newValue){
                        this.count = newValue / this.price;
                    }
                }
            }
        })
    </script>
    <div id="app2">
        <!-- radio -->
        <input type="radio" value = "男" v-model = "sex">男
        <input type="radio" value = "女" v-model = "sex">女
        <input type="text" v-model = "sex">
    </div>
    <script>
        var vm2 = new Vue({
            el:"#app2",
            data:{
                sex:"男"
            }
        })
    </script>
    <div id="app3">
        <input type="checkbox" v-model = "checked">
        <!-- <input type="text" v-model = "checked"> -->
        <span>{{checked}}</span>
    </div>
    <script>
        var vm3 = new Vue({
            el:"#app3",
            data:{
                checked:false
            },
            updated:function(){
                console.log(vm3.checked,typeof(vm3.checked));
            }
        })   
    </script>
    <div id="app4">
        <input type="checkbox" value = "1" v-model = "multiCheck">10
        <input type="checkbox" value = "2" v-model = "multiCheck">20
        <input type="checkbox" value = "3" v-model = "multiCheck">30
        <input type="checkbox" value = "4" v-model = "multiCheck">40
        <span>{{multiCheck}}</span>
    </div>
    <script>
        var vm4 = new Vue({
            el:"#app4",
            data:{
                multiCheck:[1,3]
            }
        })
    </script>
    <div id="app5">
        <select v-model = "selected">
            <option value="a">A</option>
            <option value="b">B</option>
            <option value="c">C</option>
            <option value="d">D</option>
        </select>
        <input type="text" v-model = "selected">
    </div>
    <script>
        var vm5 = new Vue({
            el:"#app5",
            data:{
                selected:"b"
            }
        })
    </script>
    <div id="app6">
        <select v-model = "multiSelect" multiple>
            <option value="a">A</option>
            <option value="b">B</option>
            <option value="c">C</option>
            <option value="d">D</option>
        </select>
        <span>{{multiSelect}}</span>
    </div>
    <script>
        var vm6 = new Vue({
            el:"#app6",
            data:{
                multiSelect:["a","c"]
            }
        })
    </script>
    <div id="app7">
        <input type="radio" v-bind:value = "a" v-model= "checked"> <!-- radio绑定value,选中状态时vm7.checked = vm7.a -->
        <span>{{a}}--{{checked}}</span>
    </div>
    <script>
        var vm7 = new Vue({
            el:"#app7",
            data:{
                a : 0,
                checked : 1
            }
        })
    </script>
    <div id="app8">
        <input type="checkbox" v-bind:true-value = "a" v-bind:false-value = "b" v-model = "checked"> <!-- checkbox当选中状态时，vm8.checked = vm8.a 未选中状态时，vm8.checked = vm8.b -->
        <span>a:{{a}}--b:{{b}}--checked:{{checked}}</span>
    </div>
    <script>
        var vm8 = new Vue({
            el:"#app8",
            data:{
                checked:3,
                a:1,
                b:2
            }
        })
    </script>
    <div id="app9">
        <select v-model = "selected">        <!-- selected，选中状态时，vm9.selected = 所选option绑定的value值 -->
            <option v-bind:value="aaa">111</option>
            <option v-bind:value="{num:2}">222</option>
            <option v-bind:value="{num:3}">333</option>
        </select>
        <span>selected:{{selected}}</span>
    </div>
    <script>
        var vm9 = new Vue({
            el:"#app9",
            data:{
                aaa:"aaa",
                selected:""
            }
        })
    </script>
</body>
</html>

世间百态不过尔尔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue(计算属性表单控件)

一、计算属性在项目开发中，我们展示的数据往往需要经过一些处理， Vue.js中提供了computed属性，来避免在模板中加入过重的业务逻辑，保证模板的结构清晰和可维护性。计算属性中，默认只有getter属性，需要时可以使用setter二、表单控件Vue.js中提供v-model的指令对表单元素进行双向数据绑定，在修改表单元素时，实例中对应的属性值也会同时更新，反之亦然。绑定value:表...
复制链接

扫一扫