vue的常用内置指令

最新推荐文章于 2023-01-13 19:43:57 发布

yanruo06280

最新推荐文章于 2023-01-13 19:43:57 发布

阅读量367

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_36594235/article/details/125588417

版权

vue的常用内置指令

1、v-bind：单向绑定解析表达式，可以简写为：xxx

2、v-model：双向数据绑定，默认收集input框的value值

若：<input type="text"/> v-model收集的是value值，用户输入的值就是value值

若：<input type="radio"/> v-model收集的是value值，要给标签设置value值

若：<input type="checkbox"/>

1>没配置input的value值，那么收集的就是checked（勾选 or 未勾选布尔值）

2>配置了input的value属性：

（1）、v-model的值是非数组，那么收集的就是checked（勾选 or 未勾选布尔值）

（2）、 v-model的值是数组，那么收集的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据

number：输入字符串转换为有效的数字

trim：去掉首尾空格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../coding/js/vue.js"></script>
</head>
<body>
    <div id="root">
        <form @submit.prevent="submitForm" >
            账号：<input type="text" v-model.trim="userinfo.account" ><br/><br/>
            密码：<input type="password" v-model="userinfo.password" ><br/><br/>
            性别：
            男<input type="radio" name="sex" v-model='userinfo.sex' value="male">  
            女<input type="radio" name="sex" v-model='userinfo.sex' value="female"><br/><br/>

            年龄：<input type="number" v-model.number="userinfo.age"><br/><br/>
            爱好：
            学习<input type="checkbox" v-model="userinfo.hobby" value="study"  >
            玩游戏<input type="checkbox" v-model="userinfo.hobby" value="game" >
            吃饭<input type="checkbox" v-model="userinfo.hobby" value="eat" ><br/><br/>
            所属校区：<select name="school" v-model ="userinfo.city" >
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option> 
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select><br/><br/>
            其他信息：<textarea v-model="userinfo.other" ></textarea><br/><br/>
            <input type="checkbox" v-model="userinfo.agree">阅读并接受<a href="http://www.atguigu.com" >《用户协议》</a>
            
            <br/><br/>
            <button >提交</button>   
        </form>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    const vm =   new Vue({
        el:"#root",
        data:{
            userinfo:{
                account:'',
                password:'',
                sex:'female',
                age:90,
                hobby:[],
                 city:"",
                other:"",
                 agree:""}            
        },
        methods:{
            submitForm(){
                // alert(1)
                console.log(JSON.stringify(this.userinfo))
            }
        }
    })
</script>
</html>

3、v-for：遍历数组/对象/字符串

4、v-on：绑定事件监听，可简写为@

5、v-if：条件渲染（动态控制节点是否存在）

6、v-else：条件渲染（动态控制节点是否存在）

7、v-show：条件渲染（动态控制节点是否展示）

8、v-text：

向其所在的节点中渲染文本内容

与{{xxx}}的区别：v-text会替换节点中的内容，{{xxx}}不会，一般会使用{{xxx}}

9、v-html指令：

向指定节点中渲染包含html结构的内容。

与插值语法的区别：

(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。