【Vue】Vue 指令

v-text

设置标签的文本属性

  • v-text 会覆盖原本标签的值
  • 标签想要部分设置文本可以使用{{ }}方式
  • v-text{{ }}支持逻辑表达式
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
    <div id="app">
        <h2>信息:{{ message }}</h2>
        <h2>信息:{{ message + "!" }}</h2>
        <h2 v-text="name">姓名</h2>
        <h2 v-text="name+' !'">姓名</h2>
    </div>
</body>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            message:"大数据男孩",
            name:"Bigdataboy",
        }
    })
</script>

mark

v-html

设置元素的 innerHTMLdata对象里的HTML结构会解析成标签v-text只会解析成文本

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
    <div id="app">
        <p v-html="content"></p>
    </div>
</body>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            content: "<h2>大数据男孩</h2>"
        }
    })
</script>

mark

v-on

为元素绑定事件

  • 完整格式:v-on:事件="方法名" 缩写:@事件="方法名"
  • 绑定的方法定义在 methods 属性里面
  • 相关事件:click 点击dblclick 双击mouseenter 鼠标移动
<body>
    <div id="app">
        <input type="button" value="v-on 指令" v-on:click="fun">
        <input type="button" value="v-on 缩写" @click="fun">
        <p v-text="message" @click="changeMessage"></p>
    </div>
</body>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            message:"大数据男孩",
        },
        methods:{
            fun:function(){
                alert("事件绑定")
            },
            changeMessage:function(){
                this.message += "真帅"
            },
        },
    })
</script>

mark

v-on 补充

传参

事件绑定方法写成函数调用形式,可以传入自定义参数

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
    <div id="app">
        <input type="button" value="按钮" @click="doBtn('老铁','666666')"/>
    </div>
</body>

<script>
    var vue = new Vue({
        el: "#app",
        methods:{
            doBtn:function(p1,p2){
                console.log(p1, p2)
            }
        }
    })
</script>

mark

修饰符

事件的后面跟上 .修饰符 可以对事件进行限制

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
    <div id="app">
        <input type="text" @keyup.enter="doEnter('回车被点击')"/>
    </div>
</body>

<script>
    var vue = new Vue({
        el: "#app",
        methods:{
            doEnter:function(p){
                console.log(p)
            }
        }
    })
</script>

mark

v-show

用于显示 & 隐藏标签

  • 支持 条件表达式
  • 本质是控制 display: none;
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
    <div id="app">
        <!-- 布尔值 -->
        <img v-show="true" src="./img/1.jpg" style="width: 10%; height: 10%;"/>
        <!-- 变量控制 -->
        <img v-show="isShow" src="./img/1.jpg" style="width: 10%; height: 10%;"/>
        <!-- 条件表达式 -->
        <img v-show="age > 18" src="./img/1.jpg" style="width: 10%; height: 10%;"/>
    </div>
</body>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            isShow:true,
            age:17
        },
    })
</script>

mark

v-if

用于显示 & 隐藏标签

  • 支持 条件表达式
  • 本质是判定为 false 时把标签移除
  • v-if 相对于 v-show,更消耗性能,因为 v-if需要操作 DOM树
<body>
    <div id="app">
        <input type="button" @click="toggleIsShow" value="切换 v-if" />
        <p></p>
        <!-- 变量控制 -->
        <img v-if="isShow" src="./img/1.jpg" style="width: 10%; height: 10%;"/>
        <!-- 条件表达式 -->
        <img v-if="age > 18" src="./img/1.jpg" style="width: 10%; height: 10%;"/>
    </div>
</body>

<script>
    var vue = new Vue({
        el:"#app",
        data:{
            isShow:true,
            age:17
        },
        methods:{
            toggleIsShow:function(){
                this.isShow = !this.isShow
            }
        }
    })
</script>

mark

v-bind

为元素绑定属性

  • 完整写法:v-bind:属性
  • 缩写::属性
  • 如果设置的 class 属性,建议使用 对象方式判断是否添加类名
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
    <div id="app">
        <!-- 绑定 src 属性(完整写法) -->
        <img v-bind:src="isSrc" style="width: 10%; height: 10%;" />
        <br />
        <!-- 绑定 src 属性(缩写写法) -->
        <img :src="isSrc" style="width: 10%; height: 10%;" />
        <br />
        <!-- 绑定类名(建议对象写法) -->
        <img :src="isSrc" :class="{img:isShow,active:isActive}" style="width: 10%; height: 10%;" />
        <!-- 绑定类名(数组写法) -->
        <img :src="isSrc" :class="[show,active]" style="width: 10%; height: 10%;" />
    </div>
</body>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            isSrc: "./img/1.jpg",
            isShow: true,
            isActive: true,
            show:"show",
            active:"active",
        }
    })
</script>

mark

v-for

根据数组生成列表结构

  • v-for经常与数组搭配使用
  • 语法:(item,index) in 数组
  • 改变数组的内容同步更新到页面上,是响应式的
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
    <div id="app">
        <h2>大数据男孩</h2>
        <ul>
            <li v-for="(item,index) in arr">
                {{ index + 1 }} {{ item }}
            </li>
        </ul>
        <h2>兴趣</h2>
        <h3 v-for="i in interest" v-bind:title="i.name"> {{ i.name }}</h3>
    </div>
</body>

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            arr:["帅气","没钱","可爱","有趣","想了解吗?"],
            interest:[
                {"name":"摄影"},
                {"name":"网络"},
                {"name":"哲学"},
            ]
        }
    })
</script>

mark

v-model

便捷设置获取表单元素的值

  • 绑定的数据会和表单元素的值相关联
  • 绑定的数据 <—-> 表单元素的值
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<body>
    <div id="app">
        <input type="text" v-model="message"/>
        <h2 v-text="message"></h2>
    </div>
</body>

<script>
    var vue = new Vue({
        el: "#app",
        data:{
            message: "",
        }
    })
</script>

mark

发表评论 / Comment

用心评论~