使用vue实现简易计算机同意条款按钮表单绑定案例_vue 我已阅读并同意平台使用-优快云博客

本文链接：https://blog.youkuaiyun.com/promise466/article/details/128943953

本文介绍了使用Vue实现简易计算机、同意条款按钮和表单绑定的案例。详细讲解了Vue指令的使用，包括双向数据绑定、数据绑定以及事件绑定，还给出了指令的简写方式，并提醒methods里的事件名不能与data里的数据名重合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用vue实现简易计算机同意条款按钮表单绑定案例

利用vue指令 v-model v-on v-bind 实现以下功能
v-on可以简写 @事件名=“methods里的方法名”
v-bind可以简写 :标签自带的属性

`v-model`:介绍

v-model 双向数据绑定
在Vue实例中改变数据的内容,页面内容随着变化,
在页面改变数据,Vue实例中的数据随着变化;
实例到内容
内容到实例的双向
input标签绑定的是 value值
v-bind只有在 vue实例中改变数据的时候页面才会更新
但是页面的响应内容更新后,vue实例的数据不会随着更新

`v-bind`:

v-bind 数据绑定
// 用途最多在标签属性上;
// 用法
// <标签 v-bind:属性名=“data里面绑定的属性值”></标签>
// 简便写法省去v-bind 保留:
// <标签 :属性名=“data里面绑定的属性值”></标签>

`v-on`:

指令v-on是专门用来绑定methods里面的事件的;
写法:
<标签 v-on:事件名=“methods里面的事件名()”></标签>
简明写法:
推荐
<标签 @事件名=“methods里面的事件名()”></标签>
注意：
methods里面的事件名一定不能和data里面的数据名重合;
会默认为data里面的数据

例如：

<button @click="total()">=</button> 
<button :disabled="!checked">下一步</button>

效果图

![在这里插入图片描述](https://img-blog.csdnimg.cn/51b56c2c19b04931ab889c4233d96d14.png

<!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>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="one">
        <h1>1.同意条款按钮</h1>
        <span>{{checked}}</span>
        <input type="checkbox" v-model="checked">同意相关条款
        <button :disabled="!checked">下一步</button>
    </div>
    <div class="two">
        <h1>2.简易计算机</h1>
        <input type="text" style="width:50px" v-model="num1">
        <select v-model="type">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" style="width:50px" v-model="num2">
        <button @click="total()">=</button> {{result}}
    </div>
    <div class="three">
        <h1>3.表单绑定</h1>
        <h3>我的性别:{{gin}}</h3>
         <!--  v-model监听value的值 -->
        <input type="radio" v-model="gin" value="man">男<br>
        <input type="radio" v-model="gin" value="woman">女<br>
        <input type="radio" v-model="gin" value="secret">保密<br>
        <h3>我的学历：{{edu}}</h3>
        <select v-model="edu">
            <option value="胎教">胎教</option>
            <option value="本科">本科</option>
            <option value="幼儿园">幼儿园</option>
        </select>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                checked:true,
                num1:1,  //计算机第1个input值
                num2:1,  //计算机第2个input值
                type:"+",  //select +-*/的值
                result:2,  //计算结果
                gin:"man",  //表单绑定 监听的value值  默认man
                edu:"幼儿园"  //与select 一个意义
            }
        },
        methods: {
            total(){
            	//第一种方法
            	//let valA = Number(this.val1);
                // let valB = Number(this.val2);
                // if(this.type=="+"){
                //     this.result=(valA + valB).toFixed(2);
                // }else if(this.type=="-"){
                //     this.result=(valA - valB).toFixed(2);
                // }
                // else if(this.type=="*"){
                //     this.result=(valA * valB).toFixed(2);
                // }else if(this.type=="/"){
                //     this.result=(valA / valB).toFixed(2);
                // }

                //第二种 eval强大且危险
                this.result=eval (this.num1+this.type+this.num2)
            }
        },
    })
    </script>
</body>
</html>