Vue绑定

孤独斗士

已于 2022-04-28 10:02:58 修改

阅读量1.7k

点赞数

分类专栏： web前端文章标签： vue

于 2022-04-27 16:16:39 首次发布

本文链接：https://blog.csdn.net/gulanga5/article/details/124453845

版权

web前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

一、绑定：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!--引入vue框架-->
    <script src="vue/vue.js"></script>
</head>
<body>



    <div>
        <!-- 1.插值写法 -->
        <!-- {{变量}}   : 这叫做插值写法，  让此处文本和data里边的变量进行绑定 -->
        <h1>{{info}}</h1><!-- 插值这种写法可以不写在标签中 -->

        <!-- 2.vue属性绑定(v-text) -->
        <!-- v-text的用法必须用在标签内部(让元素的文本内容和变量进行绑定)<将<b>加粗</b>作为普通文字添加到p标签之间> -->
        <p v-text="info2"><br/>

        <!-- v-text的用法必须用在标签内部(让元素的标签内容和变量进行绑定<将<b>加粗</b>解析为html元素添加在p标签之间>) -->
        <p v-html="info2"></p><br/>


        <!-- 2.vue属性绑定(v-bing:属性) -->
        <input type="text" v-bind:value="msg"/><br/>
        <input type="text" :value="msg"/><br/>
        <a :href="url"/>百度</a><br/>
        <img :src="imgurl"/><br/>

        <!-- 3.双向绑定测试(js变量会影响标签属性值，属性值也会影响js变量的值) -->
        双向绑定测试:<input type="text" v-model="msg" value="xxx"/><br/>

        <!-- 再次测试双向绑定 -->
        <input type="radio" v-model="gender" value="男"/>男
        <input type="radio" v-model="gender" value="女"/>女
        <h2>{{gender}}</h2>
    </div>
    <br>

        <!-- 4.事件绑定 -->
    <span>
        <input type="button" v-on:click="f()" value="按钮1"/><br>
        <input type="button" @click="ff()" value="按钮2"/><br>
        {{info}}
    </span>

<script type="text/javascript">

    let v=new Vue({
        el:"div",
        data:{
            info:"你好info",
            info2:"文本练习<b>加粗</b>",
            msg:"你好",
            url:"http://www.baidu.com",
            imgurl:"a.png",
            gender:"男"
        }
    });

    let v2=new Vue({
        el:"span",
        data:{
            info:"事件绑定"
        },
        methods:{
            f:function (){
                v.info="点击按钮f1了";
            },
            ff(){
                v.info="点击按钮f2了";
            }
        }
    });

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

二、猜数字练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
</head>
<body>

    <div>
        <input type="text" placeholder="请输入0-100之间的整数" v-model="nu"><br>
        <input type="button" value="猜一猜" @click="check()"><br>
        <h1>结果：{{info}}</h1>
    </div>
    <script>
        let num=parseInt(Math.random()*100+1);
        console.log(num);
        var v=new Vue({
            el:"div",
            data:{
                info:"",
                nu:""
            },
            methods:{
                check:function (){
                    console.log(v.nu+"--"+num);
                    if(v.nu>num){
                        v.info="你输入数字太大了";
                        //alert("你输入数字太大");
                    }else if(v.nu<num) {
                        v.info="你输入数字太小了";
                        //alert("你输入的数字太小");
                    }else {
                        v.info="是的，就是这个数字";
                        //alert("是的，就是这个数字");
                    }
                }
            }
        });
    </script>
</body>
</html>

三、计算机案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue/vue.js"></script>
</head>
<body>

    <div>
        <input type="text" v-model="num1"><br>
        <input type="text" v-model="num2"><br>

<!--        <input type="button" value="+" @click="f1(1)"/>-->
<!--        <input type="button" value="-" @click="f1(2)"/>-->
<!--        <input type="button" value="*" @click="f1(3)"/>-->
<!--        <input type="button" value="/" @click="f1(4)"/>-->
        <input type="button" value="+" @click="f2('+')"/>
        <input type="button" value="-" @click="f2('-')"/>
        <input type="button" value="*" @click="f2('*')"/>
        <input type="button" value="/" @click="f2('/')"/>

        <h1>{{result}}</h1>

    </div>
<script>
    var v=new Vue({
        el:"div",
        data:{
            num1:"",
            num2:"",
            result:""
        },
        methods:{
            f1:function (n){
                if(n==1){
                    v.result=parseInt(v.num1)+parseInt(v.num2);
                }else if(n==2) {
                    v.result=v.num1-v.num2;
                }else if(n==3){
                    v.result=v.num1*v.num2;
                }else{
                    v.result=v.num1/v.num2;
                }
            },
            f2 (s){
                v.result=eval(v.num1+s+v.num2);
            }
        }
    });
</script>
</body>
</html>

孤独斗士

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue绑定

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title>  <script src="vue/vue.js"></script></head><body> <div> <!-- 1....
复制链接

扫一扫

专栏目录