v-model、v-bind、v-on、v-html、v-text

最新推荐文章于 2021-11-29 20:42:47 发布

weixin_43331769

最新推荐文章于 2021-11-29 20:42:47 发布

阅读量138

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43331769/article/details/104037097

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Vue.js - 双向数据绑定 v-model

一、步骤
二、声明式显示 {{xxx}}

一、步骤

引入Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

创建Vue对象
el：指定根element（选择器）
data：初始化数据（model 部分）
双向数据绑定： v-model
显示数据： {{xxx}}
举例：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  window.onload = function () {//window.onload 用于提前载入浏览器页面
    const vm = new Vue({  //配置对象, 创建Vue实例
      el: '#app',       //选择器
      data: {          //数据域（model)
        username: 'Hello Vue!' //数据域中的数据
      }
    })
  }
</script>
<body>
    <div id="app">
      <input type="text"  v-model="username" />//双向数据绑定的数据是 username中的内容
      {{username}}//数据的显示
      <p >Hello {{username}}</p>//显示数据
    </div>
</body>

结果：
在这里插入图片描述

二、声明式显示 {{xxx}}

双大括号可以显示data数据域中的内容
声明式显示可以引用js的语法格式，如第23行，将其转化成大写字母

v-html

< p v-html=“message”>< /p >
v-html 会把data数据域中的文本数据理解为一个标签

v-text

< p v-text = “message”>< /p>
v-text 会把data数据域中的文本数据单纯理解为数据

:bind 强制数据绑定

将标签的属性值与data数据域中的数据做绑定

 <img :src="imgUrl">

@click绑定事件监听

   <script>
   window.onload = function () {
     const vm = new Vue({
       el: '#app',
       data:{
         message:'Hello world!',
         mes: '<a href="http:/www.baidu.com"> 我是一个超链接 </a>',
         imgUrl: '../img/_510735865_mmexport1579333094865_1579333094000_xg.jpg'
       },
       methods:{
        test(){
          alert("你看我出不出来");
        }
       }
     })
   }
 </script>
<body>
</body>
  <div id="app">
    <h2>1:双大括号的表达式</h2>
    <p>{{message}}</p>     //声明式显示，显示data数据域中的数据
    <p> {{message.toUpperCase()}}</p>//用js语法将显示内容转换为大写
    <p v-text="mes"></p>  //显示文本内容  相当于 <p>{{mes}}</p>
    <p v-html="mes"></p>  //显示文本标签
    <h2>2：指令一：强制数据绑定</h2>
    <img :src="imgUrl">
    <h2>3:指令二：绑定事件监听</h2>
    <button @click="test">test1</button>
  </div>

结果：（非bind、click的截图）
在这里插入图片描述

weixin_43331769

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-model、v-bind、v-on、v-html、v-text

Vue.js - 双向数据绑定 v-model一、步骤二、声明式显示 {{xxx}}一、步骤引入Vue.js<script src="https://cdn.jsdelivr.net/npm/vue"></script>创建Vue对象el：指定根element（选择器）data：初始化数据（model 部分）双向数据绑定： v-model显示数据...
复制链接

扫一扫

专栏目录