Vue的常用指令

Vue的指令写法：<组件 v-指令名="值"/>，功能：将 元素的状态 与 vm上的数据进行绑定。注意： 指令的值，虽然在引号：是一个js环境，支持表达式，如果绑定的是变量，去vm上查找。

v-html 用于渲染富文本数据：

<body>
    <div class="api">
       <div v-html='a'></div>
    </div>
   
</body>
<script src="./vue.js"></script>
<script>
    const vm =new Vue({
        el:'.api',
        data:{
           a: "<h1 style='color:red' >富文本内容</h1>"
        }
    })
</script>

 

 

 v-model 将表单控件的 value 与 vm上的数据进行 双向绑定：

表单修饰符（常用于输入框） .trim .lazy 将 input事件触发 改为change触发 .number 将输入的值 自动变成number 解析规则 和parseFloat一致

<body>
    <div class="btn">
        
        <input id="male" type="radio" value="男" v-model='gender' name="sex">男

        <input id="female" type="radio" value="女"  v-model='gender' name="sex">女
        <br>
        {{gender}}
        <hr>
        <input type="checkbox"  v-model='hibbes' value="篮球">篮球
        <input type="checkbox" v-model='hibbes'  value="足球">足球
        <input type="checkbox" v-model='hibbes'  value="排球">排球
        <input type="checkbox" v-model='hibbes'  value="弹球">弹球
        <br>
        {{hibbes}}
    </div>
   
</body>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el: '.btn',
        data: {
            gender:'男',
            hibbes:['篮球']
        }
    })
</script>

v-show 将元素 显示 隐藏（控制display:none）与一个布尔值绑定：

v-once 渲染数据 只会 改变一次

<style>
        .box1 {
            width: 300px;
            height: 300px;
            margin: 20px auto;
            background-color: rebeccapurple;
        }
    </style>
</head>

<body>
    <div class="box">
        <button @click='isname=!isname'>{{isname?'消失':'显示'}}</button>
        <div class="box1" v-show='isname'></div>

    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: ".box",
            //数据放在data
            data: {
                msg: '你好世界',
                isname: false
            },
            //方法放在methods
        })
    </script>

 

v-bind:属性 （属性是值普通的标签属性，可以是自定义属性） 扩展了普通属性的功能，将普通属性变成动态属性（将这个属性的值 与 vm上数据进行绑定）

简写： :属性

<body>
    <div class="box">
        <label for="n1">图片1</label>
        <input type="radio" 
            value="https://tse4-mm.cn.bing.net/th/id/OIP-C.WIrDAeihBucBrfR0VTQ3cAHaE8?w=254&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
            v-model='img1'>
        <label for="n2">图片2</label>
        <input type="radio"
            value="https://tse4-mm.cn.bing.net/th/id/OIP-C.4E37Mp8S-UEl__KjtfEQPAHaE7?w=254&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7"
            v-model='img1'>
        <img :src="img1" alt="">
        <div :id='a'></div>
    </div>


    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '.box',
            data: {
                img1: '',
                a: 'box'
            }
        })

 

v-on:事件 绑定vue事件（合成了原生事件） 简写： @事件:

<body>
    <div class="api">
        <button @click='fn()'>按钮</button>
        {{msg}}
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el:'.api',
        data:{
            msg:'你好世界'
        },
        methods:{
           fn(){
               this.msg='今天周二'
           }
        }
    })

</script>

 

posted @ 2021-11-30 09:37  今晚没吃饱  阅读(121)  评论(0)    收藏  举报