vue指令之v-model和双向数据绑定

最新推荐文章于 2024-09-13 10:44:09 发布

学习没有捷径，如果有那便是持之以恒

最新推荐文章于 2024-09-13 10:44:09 发布

阅读量349

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/wulianlang6162/article/details/98444372

版权

vue 专栏收录该内容

26 篇文章

订阅专栏

基本案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <!--//导入js包-->
    <script src="js/vue.js"></script>
</head>

<!--//导入js包-->
<script src="js/vue.js"></script>
<body>

<div id="app">

    <p>{{msg}}</p>
    <!--v-bind只能实现单向-->
    <input type="text" :value="msg" style="width: 100%">
    <!--v-model只能实现双向数据绑定，只能用在表单元素中 如：<input> 元素、<select> 元素、<option> 元素、<textarea> 元素定义多行输入字段（文本域）、<button> 元素定义可点击的按钮、<datalist>
<keygen>
<output>：-->
    <input type="text" v-model="msg" style="width: 100%">
</div>

<script type="text/javascript">

    new Vue({
        el:'#app',
        data: {

            msg:'v-model双向数据绑定v-bind只能实现单向'
        }
    });
</script>
</body>
</html>

简易计算器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单的计算器</title>
</head>
<!--//导入js包-->
<script src="js/vue.js"></script>
<div id="app">
    <h1>{{message}}</h1>
    <input type="text" v-model="n1">
    <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" v-model="n2">
    <input type="button" value="=" @click="cale">
    <input type="text" v-model="result">
</div>
<body>
<script>
    new Vue({
        el: app,
        data: {
            n1: 0,
            n2: 0,
            result: 0,
            opt: "+",
            message: "简单的计算器"
        },
        methods: {
            cale() {//计算器
                //方式1
                // switch (this.opt) {
                //     case "+":
                //         this.result=parseInt(this.n1)+parseInt(this.n2)
                //         break;
                //     case "-":
                //         this.result=parseInt(this.n1)-parseInt(this.n2)
                //         break
                //     case "*":
                //         this.result=parseInt(this.n1)*parseInt(this.n2)
                //         break
                //     case "/":
                //         this.result=parseInt(this.n1)/parseInt(this.n2)
                //         break
                // }
                //方式2：统计取巧，开发中少用
                //eval作用：eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码
                var codestr='parseInt(this.n1)'+this.opt+'parseInt(this.n2)'
                this.result=eval(codestr)
            }
        }

    })

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