初入WEB前端（18）VUE

最新推荐文章于 2024-02-10 09:00:00 发布

宋辰轩

最新推荐文章于 2024-02-10 09:00:00 发布

阅读量113

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_44004068/article/details/107228793

版权

HTML5 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.v-text

直接替换标签里的内容，无论之前是什么内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2 v-text="message"></h2>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
               message:"scx",
            }
            
        })
    </script>
</body>
</html>

在这里插入图片描述
v-text支持字符串的拼接，比如以下例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2 v-text="message+'??'">替换掉了吗</h2>
        <h2>{{message+'??'}}替换掉了吗 </h2>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
               message:"scx",
            }
            
        })
    </script>
</body>
</html>

在这里插入图片描述

2.v-html

这个指令可以解析html元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

    <title>Document</title>
</head>

<body>
    <div id="app">
        <p v-html="message"></p>
        <p v-text="message"></p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: "<span> v-html会解析html元素 </span>"
            }

        })
    </script>
</body>

</html>

在这里插入图片描述

3.v-on ，可以用@代替

用于绑定事件，如单击，双击等

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="button"  value="一个按钮"  @click="dosomething">
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            methods:{
                dosomething:function(){
                    alert("just do it!")
                }
            }

        })
    </script>
</body>

</html>

在这里插入图片描述

宋辰轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初入WEB前端（18）VUE

v-text直接替换标签里的内容，无论之前是什么内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="https://cdn.jsdelivr.net/npm/vue@2.6.11
复制链接

扫一扫