Vue中v-text，v-html，v-bind，v-on:click/@click 事件

最新推荐文章于 2024-03-22 16:10:59 发布

Python User

最新推荐文章于 2024-03-22 16:10:59 发布

阅读量546

点赞数

分类专栏： Vue基础部分文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/weixin_44684357/article/details/106999381

版权

Vue基础部分专栏收录该内容

33 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue指令</title>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>  <!-- 这个有闪现-->
        <p v-text = 'msg'></p>
        <p v-html = 'msg2'></p>       <!--用于解析html 代码-->
        <!-- <input type="button" value="按钮" v-bind:title="mytitle"> -->
        <!-- 缩写为如下格式 -->
        <input type="button" value="按钮" :title="mytitle">
        <!-- 鼠标点击事件 -->
        <input type="button" value="按钮2" v-on:click = 'show'>
        <input type="button" value="按钮2(简写版)" @click = 'show'>
        <!-- 鼠标触碰事件 -->
        <input type="button" value="按钮3" v-on:mouseover = 'show2'>
    </div>
    <script src="../js/vue-2.4.0 .js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: '成功了',
                msg2: '<h3>哈哈哈哈哈哈<h3>',
                mytitle: '我是mytitle'
            },
            methods:{  // 这只是一个对象
                show: function(){
                    alert('点击触发弹窗')
                },
                show2: function(){
                    alert('触摸触发弹窗')
                }   
            }

        })
    </script>
</body>
</html>

Python User

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中v-text，v-html，v-bind，v-on:click/@click 事件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue指令</title></head><body> <div id="app"
复制链接

扫一扫

专栏目录