vue用法示例（一）

最新推荐文章于 2024-08-14 20:13:10 发布

大霞上仙

最新推荐文章于 2024-08-14 20:13:10 发布

阅读量357

点赞数 8

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/daxiashangxian/article/details/138086249

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中的v-html用于插入HTML，v-bind用于属性绑定，以及v-model实现双向数据绑定的示例。通过实例展示了如何在Vue应用中使用这些特性来动态更新页面内容。

摘要由CSDN通过智能技术生成

1、v-html html 插入，可以插入文本，也可以插入元素，如

message:"<h1>xxx</h1>"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
</head>
<body>
<div id="app">
        <div v-html="message">zhaocuixia is a beautiful girl!</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: "Hello Vue.js!"
  }
})
</script>
</body>
</html>

2、v-bind 是属性绑定

<div v-bind:class="{'class1': use}"> v-bind: 可以简写为：即 <div :class="{'class1': use}">

Input 的id和label的for标签实现了点击范围的扩大

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1" >
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: true
  }
});
</script>
</body>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
        {{5+5}}<br>
        {{ ok ? 'YES' : 'NO' }}<br>
        {{ message.split('').reverse().join('') }}
        <div v-bind:id="'list-' + id">菜鸟教程</div> 
</div> 
        
<script>
new Vue({
  el: '#app',
  data: {
        ok: true,
    message: 'RUNOOB',
        id : 1
  }
})
</script>
</body>
</html>

3、v-model双向绑定比如input是即输入又输出

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
        
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>
</body>
</html>

大霞上仙

关注

8
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue用法示例（一）

div v-bind:class="{'class1': use}"> v-bind: 可以简写为：即 <div :class="{'class1': use}">1、v-html html 插入，可以插入文本，也可以插入元素，如。Input 的id和label的for标签实现了点击范围的扩大。3、v-model双向绑定比如input是即输入又输出。2、v-bind 是属性绑定。
复制链接

扫一扫

专栏目录