美文网首页
指令2——(v-bind)

指令2——(v-bind)

作者: 小丘啦啦啦 | 来源:发表于2019-02-27 11:39 被阅读0次

一、v-bind
用来绑定html属性,使属性的值从Vue对象的数据中获得,借此控制标签的属性对应的值。
v-bind可简写为(:)。
v-bind中可以写合法的js表达式。

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 用v-bind来绑定value属性,值为变量,变量值取Vue对象data内数据 -->
            <input type="button" v-bind:value="val">
            <!-- v-bind简写 -->
            <input type="button" :value="val">
            <!-- v-bind中加上其他js表达式 -->
            <input type="button" :value="val+'我是其他js表达式'">
        </div>

        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    val: '按钮的值我来定'
                }
            })
        </script>
    </body>
</html>

相关文章

  • Vue基础指令

    Vue循环指令 Vue绑定指令: v-bind:style,v-bind:class: v-model双向数据绑定...

  • vue中的指令

    v-bind: v-bind动态绑定指令,官方文档是这样来说的: 1.:v-bind动态绑定指令,默认情况下标签自...

  • 指令2——(v-bind)

    一、v-bind用来绑定html属性,使属性的值从Vue对象的数据中获得,借此控制标签的属性对应的值。v-bind...

  • 【Vue】常用指令之v-bind

    ?【Vue】学习养成记,【程序员必备小知识】 ? 今日小知识——Vue常用指令之v-bind v-bind指令是专...

  • v-bind

    v-bind,绑定属性的一个指令 基本用法:v-bind:title="mytitle" or :title=...

  • vue模板语法

    Mustache 语法不能作用在 HTML 特性上,遇到这种情况应该使用 v-bind 指令 指令 指令(dire...

  • vue 零散学习档案

    引言 vue中“:”、“.”、“@”意义 “:” 是指令 “v-bind”的缩写“@”是指令“v-on”的缩写“....

  • 2018-09-14 vue常用指令

    v-bind v-bind 特性被称为指令,v-bind是绑定属性的,如下边的例子:点击切换图片 其中用v-bin...

  • Vue学习总结step1

    1:Mustache 不能在HTML属性中私用,应使用v-bind指令; 2:在mustache语法中使用Java...

  • Vue最新笔记

    v-bind ---缩写:: v-on ---缩写:@ 常用指令 1、v-text (更新元素的文本内容) 2、v...

网友评论

      本文标题:指令2——(v-bind)

      本文链接:https://www.haomeiwen.com/subject/nvpxuqtx.html