我的web程序设计学习记录8

最新推荐文章于 2024-10-31 22:16:12 发布

阿澜澜儿

最新推荐文章于 2024-10-31 22:16:12 发布

阅读量219

点赞数

文章标签： html5 javascript vue.js

本文链接：https://blog.csdn.net/zx616122/article/details/107797917

版权

本文是作者学习web程序设计的记录，主要聚焦在Vue.js的指令应用上，包括如何引入Vue，使用v-text写入文本，v-html解析HTML标签，v-show根据布尔值控制元素显示，v-if/v-else条件判断以及v-for数据驱动DOM元素生成。通过实例代码展示了这些指令的工作原理和用法。

摘要由CSDN通过智能技术生成

VUE指令1

vue是一套用于构建用户界面的渐进式框架
vue.js的指令是指v-开头，作用于html标签，用于简化dom操作

引入vue

<script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

v-text：写入文本

1.先在data中插入希望显示的变量
vue.js代码

new Vue({
    el:'#app',
    data:{
        vText:'v-text指令<a href="#">aaa</a>'
    }
});

2.在

中写入一个h1标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue指令练习</title>
    <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1 v-text="vText"></h1>
</div>
<script src="js/demo2.js"></script>
</body>
</html>

v-html：可对标签进行解析在输出

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue指令练习</title>
    <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1 v-html="vHtml"></h1>
</div>
<script src="js/demo2.js"></script>
</body>
</html>

vue.js代码

new Vue({
    el:'#app',
    data:{
        vHtml:'<em>这是<a href="">v-html</a></em>.'
    }
});

在这里插入图片描述

v-show：通过布尔值判断元素是否显示，当值为false，元素会以display：none；隐藏。

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue指令练习</title>
    <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1 v-show="isShow">我会显示</h1>
    <h1 v-show="isHide">我会隐藏</h1>
</div>
<script src="js/demo2.js"></script>
</body>
</html>

vue.js

new Vue({
    el:'#app',
    data:{
        isShow:true,
        isHide:false
    }
});

隐藏标签不会显示到页面中

v-if v-else

注意：判断为false时页面中不存在dom节点。可用于显示用户登录状态
html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue指令练习</title>
    <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1 v-if="isLogin">请输入你的用户名</h1>
    <h1 v-else="isLogin">请登录</h1>
</div>
<script src="js/demo2.js"></script>
</body>
</html>

vue.js

new Vue({
    el:'#app',
    data:{
        isLogin:false
    }
});

v-for：以数据驱动，根据数据来生成页面的dom元素

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for练习</title>
    <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="1.css" media="screen" type="text/css" />
</head>
<body>
<div id="app">
    <ol>
        <li v-for="item in arr">{{item}}</li>
   </ol>
    <ul id="v-for-object" class="demo">
       <li v-for="value in object">
           {{value}}
       </li>
    </ul>
    <div>{{ message }}</div>
    <div>{{ list }}</div>
    <div>{{ web }}</div>
</div>

<script src="1.js"></script>
</body>
</html>

vue.js

new Vue({
    el:"#app",
    data:{
        arr:[123,456,789],
        object:{
            firstName:'liming',
            lastName:'lin',
            age:18
        },
        message:"infor",
        list:["a","b","c","d","e"],
        web:{
            "百度":"https://www.baidu.com",
            "搜狐":"https://www.sohu.com",
            "新浪":"https://www.sina.com",
            "淘宝":"https://www.taobao.com"
        }
    }

});