a标签 vue 动态点击_Vue学习2

三、v-show指令

指令：尤雨溪自定义的HTML属性，都以v-开头。

v-model 双向绑定

v-show 决定元素是否显示

补充一个知识点，单选按钮可以和字符串双向绑定：

<p>
    <label>
        <input type="radio" name="nation" value="c" v-model="nation">
        中国人
    </label>
    <label>
        <input type="radio" name="nation" value="f" v-model="nation">
        外国人
    </label>
</p>

2，Vue中最重的程序部分不是<script>中，而是<template>中，所以<template>是最前面的部分。

HTML中为什么也能有逻辑呢？？是因为这些东西：

v-model 双向绑定
v-show 是否显示
:src 动态src
:style 动态样式
:class 动态类名
:disabled 是否不可用
@click 鼠标点击
@mouseenter 鼠标进入
常见用法：

:style="{'background-color', `rgb(${r},${g},${b})`}"
:class="{'danger': a.length > 140}"
:src="'images/' + a + '.jpg'"
:src="`images/${a}.jpg`"
双向绑定一定要有data对应。

四、v-if指令（面试常考和v-show的区别）

v-show="false" 表示display:none; v-if="false" 表示没有这个HTML标签。

v-if可以和v-else配合使用：

<h1 v-if="true">哈哈</h1>
<h1 v-else>嘻嘻</h1>

3，一组复选框有相同的name，并且都与同一个数组进行v-model，此时Vue自动判别它们将与数组进行双绑。

4，methods中能够返回东西，被{ {}}中显示，

5，v-for 循环标签用的：

<p v-for="i in 100" :key="i">
    我是个p{
    {i}}
</p>

必须加一个:key，并且这个值不能重复，所以:key="i"刚好合适。唯一标识符。

<ul>
    <li v-for="(item,index) in arr" :key="index">
        {
    {item}}
    </li> 
</ul>

6，为了得到文本框中的值：<