提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

【Vue】input文本框通过methods和computed动态绑定数值

Vue 通过 动态 绑定 input 数值 文本框 methods
2023-09-11 14:14:57 时间

 

 computed计算属性说明:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- <SCRIPT type="text/javascript" src="vue.js"></SCRIPT> -->
<script src="vue.js"></script>

<body>

    <div id="root">

        姓：<input type="text" v-model:value="sex"><br><br>

        名：<input type="text" v-model:value="name">

        <h4>您输入的完整姓名是：</h4>
        <h4>1.正常写法：{{sex}}-{{name}}</h5>
            <h4>2.methods事件写法：{{fullName()}}</h5>
                <h3>3.computed计算写法：{{fullName_run}}</h5>
                    <h3>4.computed计算简单类函数写法：{{fullName_easy}}</h5>
    </div>

</body>

<script type="text/javascript">
    var root = new Vue({
        // var root=new Vue({
        el: '#root',
        data: {
            sex: "张",
            name: "三"
        },
        methods: {
            fullName() {
                return this.sex + "-" + this.name;
            }
        },
        computed: {
            fullName_run: {
                get() {
                    return this.sex + "_" + this.name;

                }
            },
            fullName_easy() {
                    return this.sex + "_" + this.name;
                
            }
        },

    })
</script>


</html>

相关文章