vue基础知识——v-model、v-for、v-on

最新推荐文章于 2023-05-30 19:52:00 发布

h_jQuery

最新推荐文章于 2023-05-30 19:52:00 发布

阅读量163

点赞数

分类专栏： Vue es6 javascript 文章标签： vue js web html es6

本文链接：https://blog.csdn.net/h_jQuery/article/details/116237877

版权

javascript 同时被 3 个专栏收录

124 篇文章 0 订阅

订阅专栏

Vue

87 篇文章 0 订阅

订阅专栏

es6

73 篇文章 0 订阅

订阅专栏

Vue基础知识

<!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>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- v-model双向绑定，输入框的value改变，这里的值也改变 -->
        <div v-cloak>{{msg}}</div>
        <!-- v-text不渲染html标签,输出纯文本 -->
        <!-- <h1>Vue.js</h1> -->
        <p v-text="htmlMsg"></p>
        <!-- v-html会解析html标签，再进行输出 -->
        <!-- Vue.js -->
        <p v-html="htmlMsg"></p>
        <!-- v-pre：原样输出{{htmlMsg}} -->
        <p v-pre>{{htmlMsg}}</p>
        <p v-pre="htmlMsg"></p>
        <!-- 点击c()后，msg的值改变，但是v-once中的msg还是原来的值 -->
        <p v-once>{{msg}}</p>
        <!-- @click='c'==v-on:click="c" -->
        <button @click="c">点我</button>
        <!-- v-model双向绑定msg，输入框的value值为msg，value值改变，msg也跟着改变 -->
        <!-- 点击enter键，触发fn方法 -->
        <input type="text" v-model="msg" @keyup.enter="fn">
        <!-- @click.prevent：阻止a标签的跳转 -->
        <a href="https://www.baidu.com" @click.prevent>跳转到百度</a>
        <!-- 判断flag：trueh1存在并显示内容，false：h1不存在 -->
        <h1 v-if="flag">你是猪吗</h1>
        <!-- 判断flag：true:h1的display样式值为block，false：h1的display样式值为none，h1是存在的 -->
        <h1 v-show="flag">你是猪吗</h1>
        <!-- v-for循环：v是自定义的，是array里面的每一项    -->
        <ul>
            <li v-for="v in array">
                {{v}}
            </li>
        </ul>
        <ul>
            <!-- 使用v-for的话，建议加上:key,给每一个li做一个唯一标识 -->
            <li v-for="(v,i) in arr" :key="v.id">
                {{i+"——"+v.name+"——"+v.age}}
            </li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "hello",
                htmlMsg: "<h1>Vue.js</h1>",
                flag: false,
                array: [2, 8, 6, 7, 3, 9, 1],
                arr: [{
                    id: 1,
                    name: "lisi",
                    age: 10
                }, {
                    id: 2,
                    name: "zs",
                    age: 20
                },]
            },
            methods: {
                // 方法的两种写法
                c() {
                    this.msg = "hi";
                },
                fn: function () {
                    console.log(888);
                }
            }
        })
    </script>
</body>

</html>