Vue.js 指令（2）

最新推荐文章于 2024-04-20 21:59:47 发布

挺哥的踩坑之旅

最新推荐文章于 2024-04-20 21:59:47 发布

阅读量163

点赞数

分类专栏： # vue.js 文章标签： vue vue.js

本文链接：https://blog.csdn.net/Scott_zt/article/details/104642233

版权

vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

eval（）

返回字符串计算结果

eval('2'+'3')
结果 为 5

用class添加元素样式的几种方式：直接上例子

<style>
    .red {
        color: red;
    }

    .thin {
        font-weight: 200;
    }

    .italic {
        font-style: italic;

    }

    .active {
        letter-spacing: 0.5em;
    }
</style>
<body>
<div id="app">
    <!-- 方式一：数组传多个class -->
    <h1 :class="['thin','red']">这是H1大标签</h1>

    <!-- 方式二：三元表达式 例如下例子中flag以变量方式存在，那么，vue会去data中寻找该变量，并传值-->
    <!-- flag 为 true，则执行active属性，为false，则执行italic属性 -->
    <h1 :class="['thin','red',flag ? 'active':'italic']">这是H1大标签</h1>

    <!-- 方式三：对象 -->
    <h1 :class="['thin','red',{'active':flag}]">这是H1大dadadad标签</h1>

    <!-- 方式四：直接使用对象 -->
    <h1 :class="classContent">这是H1大dadadad标签</h1>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            flag: true,
            classContent: { red: true, active: false, italic: true, }
        },
        methods: {

        },
    })
</script>

</body>

结果如下图所示
在这里插入图片描述

内联样式style 实现方式

<body>
<div id="app">
    <!-- 方式一 -->
    <h1 :style="styleContent"> 这是一个H1大标签</h1>

    <!-- 方式二 指向一个对象,数组中给定多个样式体 -->
    <h1 :style="[styleContent2,styleContent]"> 这是一个H1大标签</h1>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            styleContent: { color: 'red', 'font-weight': 200  },
            styleContent2: {'font-size': '35px'},
        },
        methods: {

        },
    });
</script>
</body>

效果如下图
在这里插入图片描述

v-for 用法

迭代数组

普通数组

<body>
    <div id="app">
        <p v-for="(item,i) in list">索引值：{{i}}-----项内容：{{ item }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [1, 2, 3, 4, 5, 6],
            },
            methods: {},
        });
    </script>
</body>

在这里插入图片描述

对象数组

<body>
    <div id="app">
        <p v-for="(user,i) in list">索引值：{{i}}-----项内容：{{ user.name }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: 1, name: 'x1' },
                    { id: 2, name: 'x2' },
                    { id: 3, name: 'x3' },
                    { id: 4, name: 'x4' },
                ],
            },
            methods: {
            },
        });
    </script>
</body>

在这里插入图片描述
2. 迭代对象中的属性

<body>
    <div id="app">
        <p v-for="(val,key,i) in user">值：{{val}}-----键{{ key }}----索引：{{i}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                user: {
                    id: 1,
                    name: '挺哥',
                    gender: '男',
                },
            },
            methods: {
            },
        });
    </script>
</body>

在这里插入图片描述
3. 迭代数字

<body>
    <div id="app">

        <p v-for="count in 10">这是第{{count}}次循环</p>
        <!-- 迭代数字count是从1开始的，不是0 -->
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                
            },
            methods: {

            },
        });
    </script>
</body>

在这里插入图片描述
迭代数组的时候，count是从1开始的，并非从0开始

v-for中key属性的用法

<body>
<div id="app">
    <div>
        <label for="">
            Id:
            <input type="text" v-model="id">
        </label>
        <label for="">
            Name:
            <input type="text" v-model="name">
        </label>
        <input type="button" value="添加" @click="add">
    </div>

    <!-- 循环、
    添加复选框 -->

    <p v-for="item  in list" :key="item.id">
        <input type="checkbox">
        索引：{{item.id}}---> 名称： {{item.name}}
    </p>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id:'',
            name:'',
            list: [
                { id: 1, name: 'csdn1' },
                { id: 2, name: '挺哥' },
                { id: 3, name: '博主' },
                { id: 4, name: 'scdn2' },
                { id: 5, name: 'csdn3' },
            ],
        },
        methods: {
            add() {
                // 在末尾push
                // this.list.push({id:this.id,name:this.name}),
                
                // 在数组初始push
                this.list.unshift({ id: this.id, name: this.name })
                
            },
        },
    });
</script>

</body>

在这里插入图片描述

v-for循环时，key只能使用number获取string
key在使用时必须使用v-bind进行属性绑定指定key的值

v-if 的用法

<body>
<div id="app">
    <input type="button" value="touch" @click="touch">
    <h3 v-if="flag">用v-if控制</h3>
    <h3 v-show="flag">用v-show控制</h3>
</div>

<script>
    var vm=new Vue({
        el:'#app',
        data:{
            flag:true,
        },
        methods:{
            touch(){
                this.flag=!this.flag
            }
        },
    });
</script>
</body>

在这里插入图片描述
button 点击控制元素是否显示