学习博客：【Vue】指令

最新推荐文章于 2024-07-25 09:51:39 发布

「已注销」

最新推荐文章于 2024-07-25 09:51:39 发布

阅读量92

点赞数

分类专栏： Vue 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/Aurinko324/article/details/125331507

版权

Vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

指令带有前缀 v-

绑定 v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<!--View层 模板-->
<div id="app">
    <span v-bind:title="message">
        你好你好
    </span>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el:"#app",
        /*Model层 数据*/
        data:{
            message:"hi,vue"
        }
    });
</script>

</body>
</html>

判断 v-if v-else-if v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--View层 模板-->
<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>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el:"#app",
        /*Model层 数据*/
        data:{
            type:'A'
        }
    });
</script>
</body>
</html>

循环 v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--View层 模板-->
<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}--{{index}}

    </li>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el:"#app",
        /*Model层 数据*/
        data:{
            items:[
                {message:'苹果'},
                {message:'西瓜'}
            ]
        }
    });
</script>

</body>
</html>

事件 v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--View层 模板-->
<div id="app">
    <button v-on:click="sayHi">click me</button>
</div>

<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
    var vm = new Vue({
        el:"#app",
        /*Model层 数据*/
        data:{
            message:"你好"
        },
        methods:{   //方法必须定义在 vue 的 methods 对象中  v-on 事件
            sayHi:function (){
                alert(this.message);
            }
        }
    });
</script>

</body>
</html>