emmmm

最新推荐文章于 2020-04-14 20:38:59 发布

污静不会开车

最新推荐文章于 2020-04-14 20:38:59 发布

阅读量324

点赞数

本文链接：https://blog.csdn.net/weixin_43785360/article/details/101164336

版权

1.（1）插值表达式写在标签内容中，不会覆盖标签中其他内容，而只是将其引用的数据显示在插值表达式占据的区域。
（2） v-text写在标签属性中，会覆盖标签中其他内容，且只能将数据以文本方式显示。
（3） v-text写在标签属性中，会覆盖标签中其他内容，和v-text不同，v-html可以将数据以html数据以代码形式显示。
2.

<body>
<div id="app">
    <p>{{msg}}</p>
    <p v-text="msg"></p>
    <p v-html="msg">    
</div>
<script src="js/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:'我是msg之中的内容',
        }
    });
</script>
</body>

mvvm即Model-View-ViewModel，mvvm的设计原理是基于mvc的，所以说mvvm不算是一种创新，充其量是一种改造，这其中的ViewModel便是一个小小的创新.
可以将ViewMode看作是Model和View的连接桥，View可以通过事件绑定Model，Model可以通过数据绑定View，通过ViewMode可以实现数据和视图的完全分离。
4.

<body>
<div id="app">
    <p>{{cat.name}}</p>
    <p>{{cat.age}}</p>
    <p>{{cat.desc}}</p>
</div>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            cat:{
                name: '罗小黑',
                age: 18,
                desc: '是一只黑色的猫'
            }
        },
    });
</script>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
用户: <input type="text" v-model=" yonghu"><br>
密码: <input type="text"  v-model=" mima"><br>
<button @click="dengru">登录</button>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            users:{
                yonghu: 'admin',
                mima: '123456',
            },
            yonghu:'',
            mima:'',
        },
        methods:{
            dengru(){
                    if(this.yonghu==this.users.yonghu&&this.mima==this.users.mima)
                    {alert('登录成功');
                    }
                    else  {alert('登录失败');
                    }
            }
        }
    });
</script>
</body>
</html>