Vue绑定

<!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>

猜你喜欢