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>