（VueJs）基本标签的运用

最新推荐文章于 2022-11-24 13:00:00 发布

黑胡子大叔的小屋

最新推荐文章于 2022-11-24 13:00:00 发布

阅读量171

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lzl980111/article/details/104725248

版权

前端专栏收录该内容

75 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>{{message}} 你好世界，相对于v-text,Mustache不会覆盖</h2>
    <h2 v-once>{{message}}</h2>
    <h2 v-html="AHtml"></h2>
    <h2 v-text="message">覆盖</h2>
    <h2 v-pre>{{message}}</h2>
    <ul>
        <li v-for="(item,index) in movies" :class="{active:index==currentIndex}" @click="FindIndex(index)">{{index}} - {{item}}</li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el: '#app',
        data: {
            message:'Hello world',
            AHtml:'<a href="http://www.baidu.com">百度一下</a>',
            movies:['海蜇王','海贼王','灌篮高手','火影忍者'],

            currentIndex:0
        },
        methods:{
            FindIndex:function(index){
                this.currentIndex=index
            }
        }
    })

</script>
</body>
</html>

在这里插入图片描述
针对为什么不用var而用const和let：
let定义变量、const定义常量，var基本不用了
创建Vue的基本属性：el、data、mehods，其中el指明作用的控件

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

黑胡子大叔的小屋

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（VueJs）基本标签的运用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color: red; } ...
复制链接

扫一扫