Vue篇—Vue基本语法，一篇文章帮你速通！

最新推荐文章于 2024-05-01 01:10:18 发布

Be explorer

最新推荐文章于 2024-05-01 01:10:18 发布

阅读量464

点赞数 11

分类专栏： Vue 文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/CNpeaceful/article/details/134642492

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

判断和循环

V-命令(if-else)

一、if-else
1、语法

<body>
<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    let vm = new Vue({
        //el表示元素，后面绑定想要操作的元素
        el: "#app",
        //data表示Model层数据，编写div中想要显示的数据，上面的div直接通过{{message}}就可以取到message中的值
        data: {
            ok: true
        }
    });
</script>
</body>

2、前端效果
（1）默认状态下

（2）利用双向绑定机制，控制台修改ok的值为false

二、if和else-if
1、代码

<body>
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='C'">C</h1>
    <h1 v-else>D</h1>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    let vm = new Vue({
        //el表示元素，后面绑定想要操作的元素
        el: "#app",
        //data表示Model层数据，编写div中想要显示的数据，上面的div直接通过{{message}}就可以取到message中的值
        data: {
            type: 'A'
        }
    });

</script>
</body>

2、前端
（1）正常情况下展示A
（2）利用双向绑定机制，控制台修改type

for循环

一、代码

<body>
<div id="app">
<!--    这个语法的意思是：遍历items这个数组，遍历出的每一项项元素叫做item，注意用li标签-->
<li v-for="item in items">
<!--    通过item.对象就可以获取数组中的数据了-->
    {{item.message}}
</li>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    let vm = new Vue({
        //el表示元素，后面绑定想要操作的元素
        el: "#app",
        //data表示Model层数据，编写div中想要显示的数据，上面的div直接通过{{message}}就可以取到message中的值
        data: {
            items:[
                {message: "张三"},
                {message: "李四"}
            ]
        }
    });

</script>
</body>

二、前端

绑定事件

方法必须定义在Vue的methods对象中
我们在html中可以使用v-on（简写为@）来监听绑定DOM事件，并在触发时执行对应的JavaScript

用法：
1、代码

<body>
<div id="app">
<!--    绑定事件用v-on或者@事件-->
<button v-on:click="SayHello">点击我</button>
</li>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
    let vm = new Vue({
        //el表示元素，后面绑定想要操作的元素
        el: "#app",
        //data表示Model层数据，编写div中想要显示的数据，上面的div直接通过{{message}}就可以取到message中的值
        data: {
            message:"测试Vue绑定事件"
        },
        methods:{ //方法必须定义在Vue的methods对象中
            SayHello:function (){
                alert(this.message);
            }
        }
    });

</script>
</body>

2、前端

至此，你对于Vue的常见的语法已经掌握，后续会继续更新关于前端Vue等技术栈，敬请期待！

Be explorer

关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue篇—Vue基本语法，一篇文章帮你速通！

我们在html中可以使用v-on（简写为@）来监听绑定DOM事件，并在触发时执行对应的JavaScript。至此，你对于Vue的常见的语法已经掌握，后续会继续更新关于前端Vue等技术栈，敬请期待！（2）利用双向绑定机制，控制台修改ok的值为false。（2）利用双向绑定机制，控制台修改type。方法必须定义在Vue的methods对象中。二、if和else-if。（1）正常情况下展示A。
复制链接

扫一扫