【Vue】通过“插值语法”和“数据绑定”为html元素赋值（图文+完整示例）

本文链接：https://blog.csdn.net/dxnn520/article/details/122739498

注意：运行代码之前，注意vue.js的位置，<script src="lib/vue.js"></script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="lib/vue.js"></script>

<body>
    <div id="app">
        <!-- “差值语法”获取变量 -->
        {{message}}
    </div>

    <div id="student">
        <!-- 指令语法：v-bind：标签元素中的属性 -->
        <a v-bind:href="m_url">{{old}}</a>

        <!-- v-bind：的简写，只用一个： -->
        <a :href="m_url">{{old}}</a>
        <input type="text" :value="old">

        <!-- 插入js表达式 -->
        <a :href="10+90">{{old}}</a>
    </div>


    <!-- 单向和双向数据绑定 -->
    <div id="uuu">
        单向数据绑定：<input type="text" v-bind:value="name"><br />
        <!--一次性赋值 -->
        <!-- v-model 多用于输入类的或表单类的控件,改变文本框值，就改变了js中的变量值 -->
        双向数据绑定：<input type="text" v-model:value="name"><br />
    </div>

    <!-- 单向和双向数据绑定 -->
    <div id="hanshu">
        data的函数插值写法：<input type="text" v-bind:value="'今天的日期是'+date"><br />
    </div>

</body>

<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })

    var student = new Vue({
        el: "#student",
        data: { m_url: "http://www.baidu.com", old: "打开百度" }
    })

    var uuu = new Vue({
        el: "#uuu",
        data: { name: "我是中国人" }
    })
    console.log(uuu)

    var hanshu = new Vue({
        el: "#hanshu",
        data: function () {
            var date = new Date();
            var seperator1 = "-";
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            var currentdate = year + seperator1 + month + seperator1 + strDate;
            // return currentdate;
            return {date:currentdate}
        }
        })
    console.log(uuu)

</script>

</html>