Vue基础操作(一)


前端Vue的基础操作(一)

image-20211025173600172

1. v-model

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jerome</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<!-- v-model
v-model用于表单数据的双向绑定,其实它就是一个语法糖,这个背后就做了两个操作:
  1. v-bind绑定一个value属性
  2. v-on指令给当前元素绑定input事件
-->
<body>
<div id="app">
    <input type="text" v-model="message"/>
    {{message}}
</div>
<script>
    var vue = new Vue({
        el: "#app",
        /*model数据*/
        data: {
            message: "hello,Jerome"
        }
    });
</script>
</body>
</html>

2. v-bind

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jerome</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<!-- v-bind 绑定对象  -->
<body>
<div class="app">
    <a :href="url">Jerome图床</a> <!-- v-bind:href 简化语句 :href-->
</div>
<script>
    var app = new Vue({
        el: '.app',
        data: {
            url: "https://www.bree.vip/",
        }
    });
</script>
</body>

</html>

3. v-if  else if  else

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jerome</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<!-- v-if else 判断 -->
<body>
<div id="app">
    <div v-if="role==='Jerome'|| role==='Jerome-admin'">您好,Jerome</div>
    <div v-else-if="role==='JeromeImg'">Jerome图床</div>
    <div v-else>您无权访问!</div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            role: "Jerome", // 取决于该值
        }
    });
</script>
</body>
</html>

4. v-for 循环列表数据

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jerome</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<!-- v-for 循环列表 -->
<body>
<div id="app">
    <p v-for="(item,index) in list">值:{{item}}----索引:{{index}}</p>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            list: ["a", "b", "c", "d", "e"],
        }
    });
</script>
</body>
</html>

5. v-for 循环列表内对象数据

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jerome</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<!-- v-for 列表对象 -->
<body>
<div id="app">
    <p v-for="(user,index) in list">{{user.id}}---{{user.name}}-----索引:{{index}}</p>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            list: [
                {id: 1, name: 'qizia'},
                {id: 2, name: 'jerome'},
                {id: 3, name: 'papyboy'}
            ],
        }
    });
</script>
</body>
</html>

6. v-for 循环对象数据

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jerome</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<!-- v-for 循环对象 -->
<body>
<div id="app">
    <p v-for="(val,key,index) in user">值:{{val}}---键:{{key}}-----索引:{{index}}</p>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            user: {
                name: "Jerome",
                age: "18",
                sex: "男"
            }
        }
    });
</script>
</body>
</html>

7. v-for 循环数字数据

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Jerome</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>

<!-- v-for 循环数字 -->
<body>
<div id="app">
    <p v-for="count in 5">这是第{{count}}次循环</p>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {}
    });
</script>
</body>

</html>

文章作者: Jerome
文章链接: /article/52/
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 XiaoLiu!
侵权声明: 若无意对您的文章造成侵权,请您留言,博主看到后会及时处理,谢谢。
评论-----昵称和邮箱必填,网址选填
  目录