基本指令01

v-text

v-text类似元素的innerText属性，它跟{{}}一样，用于数据绑定：

<div id="app">
    <!-- 绑定data中msg数据，将其渲染在页面上-->
    <h3 v-text="msg"></h3>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            msg:"hello v-text"
        }
    })
</script>

跟{{}}一样，可以使用JavaScript逻辑运算，变量拼接等

<h3 v-text="msg + '111'"></h3>

<h3 v-text="msg > 1 ? '大于' : '小于'"></h3>

<h3 v-text="msg + msg"></h3>

添加了v-text，标签中的内容会被覆盖，页面上展示的是绑定的数据

<p v-text="msg">我会被覆盖</p>

v-html

v-html和v-text功能大同小异，唯一的区别就是对于标签的解析方面

<div id="app">
    <h3 style="color: red">v-text：</h3>
    <span v-text="msg"></span>
    <h3 style="color: red">v-html：</h3>
    <span v-html="msg"></span>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            msg:"<h1>v-text和v-html的区别</h1>"
        }
    })
</script>

页面展示结果：

text-html.png

v-once

执行一次性地插值，当数据改变时，插值处的内容不会更新，v-once所定义的元素或组件只会渲染一次，首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，该块都将被视为静态内容。

<div id = "com">
    <h1> {{c}} </h1>
    <h4 v-once> {{c}} </h4>
    <input type="text" v-model="c">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script>
    var a = new Vue({
        el: '#com',
        data:{
            c:'Hello vue'
        }
    });
</script>

使用了v-once只执行一次插值：

v-once.gif

v-pre

跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑

<div id="app">
    <h3 style="color: red">不使用v-pre：</h3>
    <span>{{msg}}</span>
    <h3 style="color: red">使用v-pre：</h3>
    <span v-pre>{{msg}}</span>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            msg:"HELLO VUE!"
        }
    })
</script>

展示：

v-pre.png

v-cloak

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。造成闪烁的效果

css：

[v-cloak]{
    display: none;
}

 <div id="app">
    <h3 style="color: red">闪烁展示源码</h3>
    <span>{{msg}}</span>
    <h3 style="color: red">使用cloak：</h3>
    <span v-cloak>{{msg}}</span>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            msg:"HELLO VUE!"
        }
    })
</script>

展示效果

v-cloak2.gif

v-model

使用v-model可以实现标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

文本框

如下div中加入<p>{{ test}}</p>获取input数据，然后去修改input中数据会发现<p></p>中数据随之改变。

<div id="app">
    <input type="text" v-model="msg" />
    <p>{{msg}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm= new Vue({
        el:"#app",
        data:{ 
            msg:"好好学习"
        }
    })
</script>

效果：

v-model1.gif

复选框

选中或取消，值为true或false

<div id="app">
    <input type="checkbox" v-model="msg" />学习
    <p>{{msg}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm= new Vue({
        el:"#app",
        data:{ 
            msg:""
        }
    })
</script>

效果：

v-model2.gif

绑定的数据为空数组时，选中填null

<div id="app">
    <input type="checkbox" v-model="msg" />学习
    <p>{{msg}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm= new Vue({
        el:"#app",
        data:{ 
            msg:[]
        }
    })
</script>

效果：

v-model3.gif

因为复选框中，并没有vlaue值，加上vlaue，选中则填充到数组中

<div id="app">
    <input type="checkbox" v-model="msg" value="学习"/>学习
    <input type="checkbox" v-model="msg" value="游戏"/>游戏
    <p>{{msg}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm= new Vue({
        el:"#app",
        data:{ 
            msg:[]
        }
    })
</script>

效果:

v-model4.gif

单选框

当单选框的vlaue值跟绑定的数据相同的，那么默认就是选上的状态：

<div id="app">
    <label for="man">
        <input type="radio" v-model="sex" id="man" value="1">男
    </label>
    <label for="wom">
        <input type="radio" v-model="sex" id="man" value="1">女
    </label>
    <p>性别：{{sex}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm= new Vue({
        el:"#app",
        data:{ 
            sex:'1'
        }
    })
</script>

效果：

v-model4.png

当value值和绑定数据值不一致的时候，才不是选上的状态

<div id="app">
    <label for="man">
        <input type="radio" v-model="sex" id="man" value="男">男
    </label>
    <label for="wom">
        <input type="radio" v-model="sex" id="man" value="女">女
    </label>
    <p>性别：{{sex}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm= new Vue({
        el:"#app",
        data:{ 
            sex:''
        }
    })
</script>

效果：

v-model5.gif

下拉框

<div id="app">
    <select v-model="selected">
    <option value="星期天">星期天</option>
    <option value="我还在">我还在</option>
    <option value="学习">学习</option>
    </select>
    <p>选中：{{selected}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm= new Vue({
        el:"#app",
        data:{ 
            selected:''
        }
    })
</script>

效果：

v-model6.gif

表单输入绑定修饰符

lazy延迟修饰符
<div id="app">
    <input type="text" v-model.lazy="msg">
    <p>输入：{{msg}}</p>
    </div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm= new Vue({
        el:"#app",
        data:{ 
            msg:''
        }
    })
</script>

效果：

v-model.lazy.gif
number数字修饰符

这通常很有用，因为即使在 type=“number” 时，HTML 输入元素的值也总会返回字符串。如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

<div id="app">
    <input type="text" v-model.number="msg">
    <p>输入：{{typeof(msg)}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm= new Vue({
        el:"#app",
        data:{ 
            msg:''
        }
    })
</script>

效果：

v-model.number.gif
过滤空白修饰符
<div id="app">
    <input type="text" v-model.trim="msg">
            <input type="text" v-model="msg2">
            <p>输入：{{msg}}</p>
            <p>输入：{{msg2}}</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script type="text/javascript">
    var vm= new Vue({
        el:"#app",
        data:{ 
            msg:'',
            msg2:''
        }
    })
</script>

效果


trim.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容