• Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第1章 Vue.js基础入门 1.7 双向数据绑定

    Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

    第1章 Vue.js基础入门

    文章目录

    1.7 双向数据绑定

    v-model双向数据绑定指令：

    • 数据层M层发生变化会影响视图层V层改变
    • 视图层V层发生变化会影响数据层M层改变

    示例

    在这里插入图片描述

    使用v-bind属性绑定的形式，能渲染出来，但是当修改文本框中数据时，M层中的数据不会改变。

    使用v-model代替v-bind

    在这里插入图片描述

    效果

    在这里插入图片描述

    v-model只能运用到表单元素，因为只有表单元素是用户可以操作的。

    1.7.1 v-model修饰符

    v-model可以添加修饰符

    如：数字修饰符number，表示用户只能输入数字

    在这里插入图片描述

    过滤首尾空格修饰符 .trim

    在这里插入图片描述

    .lazy修饰符：内容发生变化，并且在失去焦点时触发。

    在这里插入图片描述

    即修改值时，插值表达式的渲染结果不会立即发生变化，要等到文本框失去焦点后才变。

    1.7.2 使用v-model实现计算器案例
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>使用v-model实现计算器案例title>
    <style>
        [v-cloak] {
            display: none;
        }
    style>
head>
<body>

<div id="app" v-cloak>
    <input type="text" v-model="num1" placeholder="请输入第一个数字">
    <select v-model="sel">
        <option value="+">+option>
        <option value="-">-option>
        <option value="*">*option>
        <option value="/">/option>
    select>
    <input type="text" v-model="num2" placeholder="请输入第二个数字">
    <input type="button" value="=" @click="btn">
    <input type="text" v-model="res">
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: "Hello World",
            num1 : null,
            sel : '+',
            num2 : null,
            res : null
        },
        methods: {
            btn(){
                if (this.sel == "+"){
                    this.res = parseInt(this.num1) + parseInt(this.num2)
                }
                else if (this.sel == "-"){
                    this.res = parseInt(this.num1) - parseInt(this.num2)
                }
                else if (this.sel == "*"){
                    this.res = parseInt(this.num1) * parseInt(this.num2)
                }
                else{
                    this.res = parseInt(this.num1) / parseInt(this.num2)
                }
            }
        }
    })
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59

    运行效果

    在这里插入图片描述

  • 相关阅读:
    【NLP笔记】文本向量化
    单片机C语言实例：24、红外通讯
    基础学习1_目标检测的评估标准
    SQL server解决乱码问题
    set和map的模拟
    共筑智慧校园运维——监控易诚邀合作伙伴共襄盛举
    信号量解决生产者消费者问题
    cartographer(1)-运行
    02.机器学习原理（复习）
    算法题:树中根节点到到目标节点的路径java
  • 原文地址：https://blog.csdn.net/weixin_44226181/article/details/126554141