vue-页面渲染等常用指令

Posted 2021-06-02 yuruotianxin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-页面渲染等常用指令相关的知识，希望对你有一定的参考价值。

vue常见指令

v-bind

绑定指令，span标签提供了一个title属性,通过v-bind指令可以将该属性绑定message,如果不通过标签绑定，也可以通过{{}}进行绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>java</title>
</head>
<body>
    <h1>java</h1>
<!--view层-->
<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒
    </span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        // Model：数据
        el: "#app",
        data: {
            message: "hello,vue!"
        }
    });
</script>
</body>
</html>

判断

<!--view层-->
<div id="app">
<h1 v-if="type === \'A\'">A</h1>
<h1 v-else-if="type === \'B\'">B</h1>
<h1 v-else-if="type === \'C\'">C</h1>
<h1 v-else>No</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        // Model：数据
        el: "#app",
        data: {
            ok: true,
            type: "A"
        }
    });
</script>

循环

<!--view层-->
<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}--{{index}}
    </li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        // Model：数据
        el: "#app",
        data: {
            items:[
                {message:\'C++\'},
                {message:\'JAVA\'},
                {message:\'C\'},
                {message:\'Vue\'}
            ]
        }
    });

以上是关于vue-页面渲染等常用指令的主要内容，如果未能解决你的问题，请参考以下文章