vue本地应用 - 西凉#

vue本地应用

v-text

v-html

计数器

v-show

v-if

v-bind

v-text

v-html:

<div id="h1">
        <p v-html="h2"></p>
        <p v-text="h3"></p>
    </div>
    <script>
        var vue = new Vue({
            el: "#h1",
            data: {
                h2: "<a href='https://www.baidu.com'>百度</a>",
                h3: "<a href='https://www.baidu.com'>百度</a>"
            }
        })
    </script>

计数器：

 <div id="h1">
        <div>
            <button @click="sub">
                -
            </button>
            <span>{{num}}</span>
            <button @click="add">
                +
            </button>
        </div>
    </div>
    <script>
        var vue = new Vue({
            el: "#h1",
            data: {
                num: 0
            },
            methods: {
                sub: function () {
                    if (this.num > 0) {
                        this.num--;
                    }
                },
                add: function () {
                    if (this.num < 10) {
                        this.num++;
                    }
                }
            }
        })
    </script>

效果：

v-show

用来决定元素是否显示

如果v-show的值是true，则显示

<div id="h1">
        <button @click="changeIsShow">点击有惊喜</button>
        <p v-show="IsShow">你好</p>
    </div>
    <script>
        var vue = new Vue({
            el: "#h1",
            data: {
                IsShow: true
            },
            methods: {
                changeIsShow: function () {
                    this.IsShow = !this.IsShow
                }
            }
        })
    </script>

v-if:

效果和v-show一样，为true的时候显示

但是因为本质是通过操纵dom元素来切换显示状态，所以更占资源

v-bind:

这个指令可以操作标签中的任意属性，比如class（决定类是否生效），src

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .active {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div id="h1">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img v-bind:src="imgSrc" v-bind:class="{active:IsActive}" alt="" v-on:click="toggleActive">
    </div>

    <script>
        var vue = new Vue({
            el: "#h1",
            data: {
                imgSrc: "http://www.itheima.com/images/logo.png",
                IsActive: true
            },
            methods: {
                toggleActive: function () {
                    this.IsActive = !this.IsActive
                }
            }
        })
    </script>
</body>

</html>

posted on 2022-06-01 01:03 西凉# 阅读(49) 评论(0) 编辑收藏举报

刷新页面返回顶部