Vue.js基本指令-蒲公英云

Vue.js基本指令

插值表达式“{ {}}”

v-html和v-text指令

例1

v-on指令

例1

v-model指令

例1

v-if指令

例1：判断二月份有几天

例2：比较两个数的大小

v-show指令

v-if和v-show的区别

v-for 指令

遍历数组

遍历对象

插值表达式“{ {}}”

数据绑定最常见的形式就是使用双大括号（Mustache语法）“{ {}}”将动态绑定的数据实时显示出来

<div id="app">
    {
   {msg}}<br>
    {
   {5+5}}<br>
    {
   { ok ? 'YES' : 'NO' }}<br>
    {
   { msg.split('').reverse().join(',') }}
</div>
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    msg: 'asdfSF',
  }
})
</script>

v-html和v-text指令

v-html指令用于输出html代码

v-text指令主要用来更新textContent,将示例中的数据当作纯文本输出

例1

<div id="app">
    <div v-html="msg"></div>
    <div v-text="msg"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    msg: '<h1>Vue教程</h1>'
  }
})
</script>

v-on指令

v-on指令是用来绑定事件监听器的。类似于原生的JavaScript中的onclick的用法，使用此指令可以进行一些交互。” v-on: “可以简写为“ @ ”

例1

<div id="app">
        <input type="button" value="点击次数" @click="add"/>
        <p>我被按了 {
   {count}} 次</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                count:0
            },
            methods:{
                add(){
                    this.count++
                }
            }
        })
    </script>

v-model指令

v-model指令的本质是监听用户输入事件，从而更新数据。同时，v-model指令会忽视所有表单元素的value、checked、selected特性的初始值，他会将Vue实例中的数据作为数据来源。当输入事件发生时，他会实时更新Vue示例中的数据，从而实现数据的双向绑定。

例1

<div id="app">
        <p>input元素：</p>
        <!-- 使用v-model指令在表单上创建双向数据绑定 -->
        <input v-model="message" placeholder="请输入...">
        <p>消息是：{
   {message}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                message:'hello',
            }
        })
    </script>

v-if指令

v-if指令可以实现条件渲染，Vue会根据表达式的值的真假来渲染元素

例1：判断二月份有几天

<div id="app">
        <input type="text" v-model="year">
        <p v-if="year%4==0 ||year%100==0">{
   {show(29)}}</p>
        <p v-else>{
   {show(28)}}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                year:2023,
            },
            methods:{
                show(num){
                    return this.year+"年2月份有"+num+"天"
                }
            }
        })
    </script>

例2：比较两个数的大小

<div id="app">
        请输入第一个数：<input type="text" v-model="num1">
        <br>
        请输入第二个数：<input type="text" v-model="num2">
        <br>
        <p v-if="!this.num1||!this.num2">比较结果：{
   {show("请输入正确数字")}}</p>
        <p v-else-if="num1>num2">比较结果：{
   {show("第一个数大于第二个数")}}</p>
        <p v-else-if="num1<num2">比较结果：{
   {show("第一个数小于第二个数")}}</p>
        <p v-else="num1==num2">比较结果：{
   {show("第一个数等于第二个数")}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                num1:'',
                num2:'',
                result:''
            },
            methods:{
                show(da){
                    return  da
                },
            }
        })
    </script>

v-show指令

v-show指令和v-if指令作用还差不多,以下面的例子来区分一下

例1

<div id="app">
        <div v-if="isTrue">v-if</div>
        <div v-show="isTrue">v-show</div>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
            },
            computed:{
                isTrue(){
                    return false;
                }
            }
        })
    </script>

v-if和v-show的区别

v-if没有显示是因为对页面进行注释

v-show没有显示是因为CSS中的display的值为none

v-if的原理：每次动态创建或移除元素，来实现元素的显示或隐藏

v-show的原理：动态为元素添加或移除display:none样式，来实现元素的显示和隐藏

如果要频繁的切换元素的显示状态，用v-show性能更好

v-for 指令

v-for用来遍历数组、对象的，其表达式需要结合in来使用

遍历数组

<div id="app">
        <ul>
            <li v-for="cloth in clothes">{
   {cloth.name}}:${
   {cloth.price}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                clothes:[
                    {
                        name:'衬衫',
                        price:'180'
                    },
                   {
                        name:'外套',
                        price:'200'
                   },
                   {
                        name:'裤子',
                        price:'380'
                   }
                ]
            }
        })
    </script>

遍历对象

<div id="app">
        <ul>
            <li v-for="(value,key,index) in user">{
   {index}}-{
   {key}}:{
   {value}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                user:{
                    name:"张三",
                    age:"30",
                    sex:"男"
                }
            }
        })
    </script>