Vue的基本语法

月亮的-影子

于 2021-02-02 16:04:34 发布

阅读量61

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/m0_46388866/article/details/113562452

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue的基本语法

1.v-bind绑定参数，这里别忘了需要命名空间
2.v-for循环遍历
3.v-if、v-else-if、v-else判断语句
4.v-on:事件=“函数”

代码（v-if和v-for）

<!DOCTYPE html>
<html lang="en"
      xmlns:v-if="http://www.w3.org/1999/xhtml"
      xmlns:v-for="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<!--测试if else-->
<div id="app">
    <span v-if="ok">ok</span>
    <span v-else>no</span>
</div>

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

<!--测试循环-->
<div id="app3">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>


<script>

    var vue3=new Vue({
        el:"#app3",
        data:{
            items:[
                {message:'好人'},
                {message: "。sss"}
            ]
        }
    })



    var vue2=new Vue({
        el:"#app2",
        data:{
            type:'A'
        }
    })


    var vue=new Vue({
        el:"#app",
        data:{
            ok:true
        }
    })
</script>
</body>
</html>

代码（v-on）

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id="app">
    <button v-on:click="sayHi">clickme</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    var vue=new Vue({
        el:"#app",
        data:{
            message:"hello"
        },
        methods:{
            sayHi:function () {
               alert(this.message);
            }
        }
    })
</script>


</body>
</html>

月亮的-影子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的基本语法

Vue的基本语法1.v-bind绑定数据，让数据在这里输出，这里别忘了需要命名空间2.v-for循环遍历3.v-if、v-else-if、v-else判断语句代码（test）<!DOCTYPE html><html lang="en" xmlns:v-if="http://www.w3.org/1999/xhtml" xmlns:v-for="http://www.w3.org/1999/xhtml"><head> <m
复制链接

扫一扫

专栏目录