vue绑定表单

最新推荐文章于 2024-05-28 00:19:30 发布

qq_18314469

最新推荐文章于 2024-05-28 00:19:30 发布

阅读量199

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_18314469/article/details/87953717

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 双向绑定数据 </title>
</head>
<style>
p {
    color: orangered;
    font-weight: 700;
    font-stretch: expanded;
}
span {
    color: palevioletred;
    font-size: 16px;
}
</style>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
  <div id="model-bind">
    <!-- <p>双向绑定输入框：</p> -->
    <span>1.绑定输入框:</span><br>
    <input type="text" v-model="text"><br>
    <span>{{text}}</span><br><br>

    <span>2.绑定富文本框:</span><br>
    <textarea  v-model="textarea" placeholder="请输入..."></textarea><br>
    <span>{{textarea}}</span><br><br>

    <span>3.绑定多个复选框:</span><br>
    <input type="checkbox" id="Chrome" value="Chrome" v-model="checkNames">
    <label for="Chrome">Chrome</label><br>
    <input type="checkbox" id="hotfix" value="hotfix" v-model="checkNames">
    <label for="hotfix">hotfix</label><br>
    <input type="checkbox" id="IE" value="IE" v-model="checkNames">
    <label for="IE">IE</label><br>
    <sapn>所选择的浏览器：{{checkNames}}</sapn><br><br>

    <span>4.绑定单个复选框:</span><br>
    <input type="checkbox" id="single" v-model="chioce">
    <label for="single">{{chioce}}</label><br><br>

    <span>5.绑定选择框:</span><br>
    <select v-model="city">
        <option value="郑州">郑州</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="武汉">武汉</option>
    </select>
    <span>城市选择结果: {{city}}</span><br><br>

    <span>6.绑定单选按钮:</span><br>
    <input type="radio" v-model="radios" id="apple" value="苹果">
    <input type="radio" v-model="radios" id="orange" value="橘子">
    <input type="radio" v-model="radios" id="purple" value="葡萄">
    <br>
    <span>my favorate fruit is: {{radios}}</span>

  </div>
</body>
<script>
var vm = new Vue({
    el: '#model-bind',
    data: {
        text: '巴啦啦啦',
        textarea: '双向绑定富文本框啦，快来测试啊啊啊啊啊啊啊',
        checkNames: [],
        chioce: true,
        city: '郑州',
        radios: '苹果'
    }


});
</script>