v-bind,v-if,v-on,v-for,v-model,Mustache语法,v-html

〆﹏为你伏笔

已于 2022-05-19 20:04:08 修改

阅读量105

点赞数

分类专栏： vue 文章标签： vue.js javascript

于 2022-05-19 19:57:37 首次发布

本文链接：https://blog.csdn.net/Q2159621453/article/details/124869505

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

v-bind

    <div id="app">
        <span v-bind:title="msg">鼠标悬停查看动态信息</span>
    </div>

    <script src="../vue.js""></script>

    <script>
        const app = new Vue({
            el: " #app", 
            data() { 
                return { 
                    msg: "页面加载于" + new Date().toLocaleString() 
                } 
            }
        }) 
    </script>

v-bind能绑定该标签内部所拥有的属性，能进行简写(例：v-bind:title="msg"可以简写成:title="msg"。

v-if

<div id="app">
        <p v-if="seen">现在你看到我了</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    seen: false
                }
            }
        })
    </script>

控制dom元素的显示与隐藏。

v-for

    <div id="app">
        <ul>
            <li v-for="item in todos">
                {{item.text}}
            </li>
        </ul>
    </div>

    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    todos: [
                        { text: '学习vue的第一天' },
                        { text: '我是一只快乐的程序员' },
                        { text: '我是一只快乐的咸鱼' }
                    ]
                }
            }
        })
    </script>

动态遍历数组，与es6用法差不多。

v-on

    <div id="app">
        <p>
            {{count}}
        </p>
        <button @click = "add">+</button>
    </div>
    <script>
        const app = new Vue({
            el:"#app",
            data(){
                return {
                    count:1
                }
            },
            methods:{
                add:function(){
                    this.count++;
                }
            }
        })
    </script>

methods属性，专门用来存放函数，让别人调用。

v-on给元素绑定事件，事件类型由参数决定。可简写(例:v-on:click = ''可简写成@click = ''。

v-model

<body>
    <div id="app">
        <p>
            {{msg}}
        </p>
        <input type="text" v-model="msg">
    </div>

    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    msg: "我是一只快乐的程序员",
                }
            }
        })
    </script>
</body>

v-model可以显示值和实时更新值。

Mustache语法

<body>
    <div id="app">
        <h3>{{msg}}</h3>
        <h3>{{msg}},啦啦啦</h3>
        <div>{{firstName+lastName}}</div>
        <div>{{firstName+" "+lastName}}</div>
        <div>{{firstName}}{{lastName}}</div>
        <div>{{count}}*{{count*count}}</div>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    msg: "你好啊",
                    firstName: "张",
                    lastName: "飞",
                    count: 100
                }
            }
        })
    </script>
</body>

v-html

<body>
    <div id="app">
        <div>{{url}}</div>
        <div v-html='url'></div>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    url: "<a href = 'https://www.baidu.com'>百度一下</a>"
                }
            }
        })
    </script>
</body>

v-html可以解析html标签，会覆盖原来的值，与innerHTML用法类似。

〆﹏为你伏笔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-bind,v-if,v-on,v-for,v-model,Mustache语法,v-html

v-bind <div id="app"> <span v-bind:title="msg">鼠标悬停查看动态信息</span> </div> <script src="../vue.js""></script> <script> const app = new Vue({ el: " #app", da
复制链接

扫一扫