vue用法示例（一）

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

message:"
xxx
"


<!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 是属性绑定

v-bind: 可以简写为：即

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>

相关阅读:
计算机视觉结合深度学习项目-智能停车场空车位实时识别
elasticsearch配置
SparkStreaming介绍
数字电路：常见的锁存器浅析
详解设计模式：原型模式
AQS 框架中 setState() 和 setExclusiveOwnerThread() 方法顺序问题
mysql数据库可以执行定时任务
信息学奥赛一本通 1947：【09NOIP普及组】细胞分裂 | 洛谷 P1069 [NOIP2009 普及组] 细胞分裂
【PAT甲级 - C++题解】1118 Birds in Forest
目标检测常见数据增强算法汇总讲解（Mixup，Cutout，CutMix，Mosaic）

原文地址：https://blog.csdn.net/daxiashangxian/article/details/138086249