Vue框架之双向绑定事件

最新推荐文章于 2023-09-16 17:17:32 发布

weixin_30348519

最新推荐文章于 2023-09-16 17:17:32 发布

阅读量81

点赞数

文章标签： javascript 前端 json ViewUI

原文链接：http://www.cnblogs.com/guobaoyuan/p/7844750.html

版权

Vue框架之双向绑定事件

首先介绍下Vue框架的语法

vue通过 {{temp}} 来渲染变量

{{count+100}}　　# 求和
v-text　　# 为标签插入text文本

v-html　　# 为标签插入html

v-show 　 # 根据布尔值判断，显示与隐藏，

v-if　　　# if判断语句，根据真假值来显示对应的内容

v-else　　# 与v-if连用

v-for 　　# for循环，如果对象是列表的话，可以显示其索引，字典默认显示value值

v-model  #这是一个双向绑定事件（白话：就是我这边输入，就可以直接获取到值，数据修改值后我页面可以立即变更，中间省去很多的查找标签的内容）

注意事项：在Vue中的this代表的是window，在前端定义的变量以及函数都是定义在window中。

Vue框架双向绑定实例（input输入页面实时显示）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="myapp">  首先要先定义一个div标签也就是说要对操作的标签设置一个父标签
        <input type="text" v-model="message">  绑定一个双向事件 
        <p>{{ message }}</p>    这个是和绑定的双向事件同名
    </div>
    <script>
        new Vue({            通过new定义一个Vue的方法
            el:'#myapp',     使用el 找到设置的标签，这个方法只支持id属性
            data:{              data 是一个json数据
                message:''    找到定义的变量然后设置成一个空字符串，这个要和绑定的那个名称一样
            }
        })
    </script>
</body>
</html>

Vue框架双向绑定实例（下拉选择内容然后点击绑定的button按钮页面显示选择的内容）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
    <script src="vue.js"></script>
</head>
<body>
<div id="int">
<input  type="text" v-model="message">
    <!--v-model是实现双向绑定-->
<p>{{message}}</p>
    <input type="button" value="clicke me" v-on:click="butText" >
    <select v-model="sel">
        <option value="111">111</option>
        <option value="222">2222</option>
        <option value="333">3333</option>
        <option value="444">4444</option>
    </select>


</div>
<script>
    var na = new Vue({
        el:'#int',
        data:{
            message:'',
            sel:'111'
        },
        methods:{
            butText:function () {
                alert(this.sel)
            }
        }
    });

</script>
</body>
</html>

转载于:https://www.cnblogs.com/guobaoyuan/p/7844750.html

weixin_30348519

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue框架之双向绑定事件

Vue框架之双向绑定事件首先介绍下Vue框架的语法vue通过 {{temp}} 来渲染变量{{count+100}}　　# 求和v-text　　# 为标签插入text文本v-html　　# 为标签插入htmlv-show 　 # 根据布尔值判断，显示与隐藏，v-if　　　# if判断语句，根据真假值来显示对应的内容v-else　　# 与v...
复制链接

扫一扫