v-model

vue指令 v-model

把value属性和vue数据变量，双向绑定到一起

语法：v-model = " vue树变量"

双向绑定

• 数据变化 => 试图自动同步
• 视图变化 -> 数据自动变化

遇到复选框

非数组  ——关联的是复选框的checked属性

数组 ——关联的是复选框的value属性

<template>
  <div>
    <span>用户名：</span>
    <input type="text" v-model="username" />
    <div>
      <span>密码：</span>
      <input type="password" v-model="password" />
    </div>
    <div>
      <span>地址：</span>
      <select v-model="from">
        <option value="北京">北京</option>
        <option value="南京">南京市</option>
        <option value="天津">天津市</option>
      </select>
    </div>
    <div>
      <!-- 遇到复选框，v-model
            非数组  - 关联的是复选框的checked属性
            数组  - 关联的是复选框的value的属性
         -->
      <span>爱好：</span>
      <input type="checkbox" value="抽烟" v-model="hobby" />抽烟
      <input type="checkbox" value="喝酒" v-model="hobby" />喝酒
      <input type="checkbox" value="写代码" v-model="hobby" />写代码
    </div>

    <div>
      <span>性别：</span>
      <input type="radio" value="男" name="sex" v-model="gender" />男
      <input type="radio" value="女" name="sex" v-model="gender" />女
    </div>
    <div>
      <span>自我介绍</span>
      <textarea v-model="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      from: "",
      hobby: [],
      //页面刷新选中 男
      gender: "男",
      intro:''
    };
  },
};
</script>

vue指令 v-model修饰符

让v-model 拥有更强大的功能

 语法：

• v-model.修饰符 = " vue数据变量"
  • .number    以parseFloat转为数字类型
  • .trim    去除首尾空白字符
  • .lazy   在change时触发而非input时

<template>
  <div>
    <div>
      <span>年龄:</span>
      <input type="text" v-model.number="age">
    </div>
    <div>
      <span>人生格言:</span>
      <input type="text" v-model.trim="motto">
    </div>
    <div>
      <span>自我介绍:</span>
      <textarea v-model.lazy="intro"></textarea>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      motto: "",
      intro: ""
    }
  }
}
</script>

vue指令 v-text和v-html

v-text和v-html

 语法：

•  v-text = "vue数据变量"
• v-html = "vue数据变量"

<template>
  <div>
    <p v-text="str"></p>
    <p v-html="str"></p>
    
  </div>
</template>

<script>
export default {
  data () {
    return {
      str:'<span>我是一个span标签</span>'
    }
  }
}
</script>

v-text 把值当成普通字符串显示 ，v-html把值当作html标签解析

vue指令 v-show和v-if和v-else

控制标签的隐藏或出现

 语法：

•   v-show=" vue变量"
• v-if = “ vue变量”

原理：

• v-show  用display：none隐藏  （频繁切换使用）
• v-if   直接从DOM树上移除

<template>
  <!-- v-show 采用dispaly：none
      v-if:采用从DOM树直接移除
 -->
  <div>
    <h1 v-show="isShow">111</h1>
    <h2 v-if="isOk">222</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      isOk: false,
    };
  },
};
</script>

高级

• v-else使用

<!-- v-if 和 v-else -->
  <p v-if="age >= 18">成年了</p>
  <p v-else>还得多吃饭</p>

<script>
export default {
  data() {
    return {
      age:18
    };
  },
};
</script>