Vue操作指令

最新推荐文章于 2024-07-09 00:17:48 发布

2B青年弹棉花

最新推荐文章于 2024-07-09 00:17:48 发布

阅读量67

点赞数

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

本文链接：https://blog.csdn.net/weixin_42158198/article/details/104764189

版权

Vue学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../vue/dist/vue.js"></script>
    <style>
        .box{
            width: 150px;
            height: 150px;
            background-color: blueviolet;
        }
        .active{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#app',
            data:function () {
                return{
                    msg:'指令系统',
                    msg2:'<h2>指令系统2</h2>',
                    flag:1<2,
                    isClick:false,
                    dataList:[
                        {id:1,name:'羊肉串',price:8},
                        {id:2,name:'牛肉串',price:10},
                        {id:1,name:'猪肉串',price:2}
                    ],
                    person:{
                        name:'JJ',
                        age:20,
                        fav:'video'                   }
                }
            },
            template:'<div class="app">' +
                '<h1>{{ msg }}</h1>' +
                '<p v-text="msg"></p>' +
                '<div v-html="msg2"></div>' +
                '<div v-if="flag">值为true</div>' +
                '<div v-if="Math.random()>0.5">显示</div>' +
                '<div v-else>不显示</div>' +
                '<div v-show="!flag">Show</div>' +
                '<div class="box" v-bind:class="{active:isClick}" v-on:click="onClick"></div>' +
                '<ur>' +
                '<li v-for="(item,index) in dataList">' +
                '<h2>{{item.id}}</h2>' +
                '<h3>{{item.name}}</h3>' +
                '<em>{{item.price}}</em>' +
                '</li>' +
                '</ur>' +
                '<ur>' +
                '<li v-for="(value,key) in person">' +
                '<span>{{key}} === {{value}}</span>' +
                '</li>' +
                '</ur>' +
                '</div>',
            methods:{
                onClick(e){
                    this.isClick = this.isClick == false?true:false;
                }
            }
        });
        console.log(vm)
    </script>
</html>