v-bind:
eg: v-bind:class=“className” v-bind: 简写 :
className 不会当作字符串解析,会被当做变量解析
v-model:value
数据双向绑定,一般用于表单元素 input,checkboxselect等
ps: v-model 默认绑定value,可以简写: v-model=“”
<div id="root">
<!-- @submit.prevent 提交时默认阻止原事件 -->
<form @submit.prevent="formSubmit">
<!-- v-model.trim 去除前后空格;number将输入转化为数字 -->
<label>账号:<input type="text" v-model:value.trim="account"></label><br>
<label>密码:<input type="password" v-model="psw"></label><br>
<label>年龄:<input type="number" v-model.number="age"></label><br>
<!-- 当input没有输入框,一定要自己配置 value !!! -->
性别:
男<input type="radio" name="sex" value="male" v-model="sex">
女<input type="radio" name="sex" value="female" v-model="sex"><br>
<!-- checkbox 绑定的数组,若是字符串则选择为 true,不选 false -->
爱好:
吃饭<input type="checkbox" name="fav" value="cf" v-model="hobby">
睡觉<input type="checkbox" name="fav" value="sj" v-model="hobby">
打豆豆<input type="checkbox" name="fav" value="ddd" v-model="hobby"><br>
所属校区:<select v-model="school">
<option value="">请选择校区:</option>
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>
<option value="gz">广州</option>
</select><br>
<!-- lazy:当绑定的元素失去焦点时,绑定到"other" -->
其他信息:<textarea v-model.lazy="other" cols="20" rows="3"></textarea><br>
<input type="checkbox" v-model="agree">同意用户协议<br>
<button>提交</button>
</form>
</div>
v-on:click
点击事件 简写 @click
v-if=“bool” v-else-if=“bool” v-else
当 bool===false 表示标签完全消失(控制台也找不到),尽量用 v-show
注意 v-else 后面不要加东西了
v-show=“bool”
本质是控制 display
v-for="(p,index) in persons :key=‘p.id’ "
:key 用于虚拟dom的diff算法,在元素不会变化的情况下可以用 index 代替 p.id
v-text v-html(有安全隐患!!!)
使用后会覆盖原来的内容
v-once
只在初次渲染,之后不再改变
v-pre
vue不进行解析
v-cloak
在vue未编译完全时,会隐藏(如下css)
// css
[v-cloak]{
display:none
}