文章目录

• • v-text & v-html
  • v-model
  • v-on
  • v-for
  • v-if & v-show
  • v-bind

v-text & v-html

在讲这两个指令之前，先说说我们很熟悉的 插值，再来说说用这两条指令替代插值的好处。

语法:

{{插值表达式}}

说明：

（1）这是使用Vue实例最简单的方式——花括号内部可以直接使用Vue实例的数据和方法

（2）不管是直接写个js语句，还是调用Vue实例，花括号内部必须有返回值

（3）当网速过慢，数据尚未加载成功时，页面时会显示最原始的花括号，这种现象叫做 插值闪烁 —— 使用指令可以避免这种现象

语法:

<span v-text="msg"></span>
<span v-html="msg"></span>

说明：

（1）将数据写到元素内部，如果数据是HTML语句，会被当作普通文本

（2）将数据写到元素内部，如果数据是HTML语句，会作为HTML被渲染

演示：

<div id="app">
    <span v-text="msg"></span><br>
    <span v-html="msg"></span><br>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
        	// 注意这里的数据
            msg: "<h2>Lolisuki!<h2>"
        }
    });
</script>

v-model

语法:

<input type="checkbox" value="111" v-model="xxx">111<br>
<input type="checkbox" value="222" v-model="xxx">222<br>
<input type="checkbox" value="333" v-model="xxx">333<br>

说明：

（1）上面讲的v-text/v-html其实是单向绑定，因为此时页面上的元素并不能被用户改动

（2）而v-model可是实现模型与视图的双向绑定，因为使用v-model的元素都是用户可以在视图直接修改的

（3）所以可使用v-model的元素有：input、select、textarea、checkbox、radio等

（4）上面的这些元素，对应的绑定数据的类型是不同的。比如input、textarea对应字符串，select、checkbox对应数组

演示：

<div id="app">
    <input type="checkbox" value="物述有栖" v-model="vtuber">物述有栖<br>
    <input type="checkbox" value="神乐七奈" v-model="vtuber">神乐七奈<br>
    <input type="checkbox" value="猫宫日向" v-model="vtuber">猫宫日向<br>
    <h2>
        你选择了：{{vtuber.join(" ")}}
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            vtuber: []
        }
    });
</script>

v-on

语法:

v-on:click="xxxxxx"
@click="xxxxxxx"

说明：

（1）用于给页面元素绑定事件

（2）之前我们使用的 event.preventDefault() 或 event.stopPropagation() 在Vue中如何实现呢？用下面的这些事件修饰符：

演示：

<div id="app">
    <button v-on:click="inc">增加</button>
    <button v-on:click="dec">减少</button>
    <h2>num = {{num}}</h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {
            inc() {
                this.num++;
            },
            dec() {
                this.num--;
            }
        }
    });
</script>

v-for

语法:

遍历数组：
v-for="item in items"
遍历对象：
v-for="value in object"
v-for="(value,key) in object"

说明：

（1）既可以遍历数组元素，又可以遍历对象属性

（2）还可以在遍历时加上下标，比如 v-for="(item, index) in items"

演示：

<div id="app">
    <ul>
        <li v-for="user in users">
            {{user.name}} 的年龄是 {{user.age}}
        </li>
    </ul>
    <br>
    <ul>
        <li v-for="(value, key) in person">
            对象的属性{{key}}，对象的属性值{{value}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            // 对象列表
            users: [
                {"name": "Alice", "age": 12},
                {"name": "Mana", "age": 11},
                {"name": "Hana", "age": 11},
            ],
            // 单个对象
            person: {"name": "Alice", "age": 12}
        }
    });
</script>

v-if & v-show

语法:

v-if="布尔表达式"
v-show="布尔表达式"

说明：

（1）v-if为false的时候，元素直接会不存在

（2）v-show为false的时候，元素只是display: none而已

（3）你甚至可以使用 v-else-if 和 v-else

演示：

<div id="app">
    <button @click="show=!show">点我切换</button>
    <h2 v-if="show">
        Lolisuki！！！
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            show: true
        }
    });
</script>

v-bind

语法:

v-bind:属性名="Vue中的变量"

说明：

（1）v-bind用于在属性上（即标签上的各种字段）使用Vue数据

（2）因为元素的属性是不允许使用插值的，所以修改元素属性也只能使用v-bind

演示：

<div id="app">
    <img v-bind:src="imgSrc" :height="imgHeight" :width="imgWidth"/>
    <div v-bind:style="divStyle">Lolisuki!!!</div>
    <div v-bind:class="divClass">Lolisuki!!!</div>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            imgSrc: "img/pic.png",
            imgHeight: "600px",
            imgWidth: "1000px",
            divStyle: "color:pink",
            divClass: "pink" // css中要有.pink类
        }
    });
</script>

❤️