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>

相关阅读:
51单片机学习：IO扩展(串转并)实验-74HC595
电容笔值不值得买？电容笔十大品牌排行
修改http_charfinder.py使能在python311环境中运行
java通过路径返回流给前台
笑霸餐厅 | 瑞吉外卖项目 | 完整基础部分(后端学习笔记)
无线蓝牙耳机哪款性价比高？蓝牙耳机性价比排行
PCB（一）：altium designer 环境安装配置
uniapp 动态切换应用图标、名称插件（如新年、国庆等） Ba-ChangeIcon
领域事件和集成事件没那么高大上
大数据必学Java基础（九十五）：预编译语句对象

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