vue基础(二)

最新推荐文章于 2023-05-17 19:46:30 发布

别影响我打怪

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量86

点赞数

分类专栏： Vue 文章标签： vue vue.js html5

本文链接：https://blog.csdn.net/weixin_43370373/article/details/118360040

版权

本地应用

1. 内容绑定,事件绑定

v-text
v-html
v-on

2. 显示切换,属性绑定

v-show
v-if
v-bind

3. 列表循环,表单元素绑定

v-for
v-on补充
v-model

v-text

<!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>data</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <div id="app" >
        <p></h2><h2>{
  {message+'打工人'}}</h2></p>
        <h3 v-text="message+'打工人'"></h3>
        <h4 v-text="info+'打工人'"></h4>
        <h5>{
  {message+'打工人'}}</h5>
  </div>
  <script>
    var app = new Vue({
    
      el:"#app",
      data:{
    
        message:"今天也要加油哦!",   
        info:"加油"
              }
      })
    
  </script>
</body>
</html>

在这里插入图片描述

v-text指令的作用是:设置标签的内容(textContent)
默认写法会替换全部内容,使用差值表达式{ {}}可以替换指定内容
内部支持写表达式

v-html

<!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>
<body>
<!-- 2.html结构-->
  <div id="app">
  <p v-text="content"></p>
  <p v-html="content"></p>
  </div>
  <!-- 1、开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
   <script>
     //创建实例
     var app = new Vue({
    
       el:"#app",
       data:{
    
         content:"<a href='http://www.baidu.com'>今天也要加油哦！</a>"
       }
     })
   </script>
</body>
</html>

在这里插入图片描述

v-html指令的作用是:设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论内容是什么,只会解析为文本
解析文本使用v-text,需要解析html结构使用v-html

v-on基础

<!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>
<body>
  <!-- 2.html结构-->
  <div id="app">
    <input type="button" value="v-on指令" v-on:click="doit"></input>
    <input type="button" value="v-on简写"  @click="doit"></input>
  <input type="button" value="双击事件"  @dblclick="doit">s</input>  
  </div>
   <!-- 1、开发环境版本，包含了有帮助的命令行警告 -->
   <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
      <script>
        //创建实例
         var app =new Vue({
    
           el:"#app",
           methods:{
    
             doit:function(){
    
               alert("做IT");
             }
           },
         })
       </script>
</body>
</html>

在这里插入图片描述

<!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"</

最低0.47元/天解锁文章

别影响我打怪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础(二)

本地应用1. 内容绑定,事件绑定v-textv-htmlv-on2. 显示切换,属性绑定v-showv-ifv-bind3. 列表循环,表单元素绑定v-forv-on补充v-modelv-text<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="
复制链接

扫一扫

专栏目录