“Vue 姓名案例”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
（建立内容为“https://www.bilibili.com/video/BV1Zy4y1K7SH?p=18”的新页面）
 
第1行： 第1行：
 
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=18
 
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=18
 +
 +
=== 插值语法实现 ===
 +
<syntaxhighlight lang="html">
 +
<!DOCTYPE html>
 +
<html lang="zh-CN">
 +
<head>
 +
    <meta charset="UTF-8">
 +
    <title>姓名案例_插值语法实现</title>
 +
    <!-- 引入 Vue -->
 +
    <script type="text/javascript" src="../js/vue.js"></script>
 +
</head>
 +
<body>
 +
    <!-- 准备好一个容器 -->
 +
    <div id="root">
 +
        姓：<input type="text" name="" id="" v-model="firstName"><br>
 +
        名：<input type="text" name="" id="" v-model="lastName"><br>
 +
        姓名：<span>{{firstName}}-{{lastName}}</span><br>
 +
        需求一：不管输入几位，只要三位：<span>{{firstName.slice(0, 3)}}-{{lastName.slice(0, 3)}}</span>
 +
        <!-- 上面这种也可以实现，但如果要求对输入值进行更复杂的操作后再回显到页面上的情况下，这种写法就违反了官方风格指南中提到的
 +
        模板中简单的表达式
 +
        https://v2.cn.vuejs.org/v2/style-guide/#%E6%A8%A1%E6%9D%BF%E4%B8%AD%E7%AE%80%E5%8D%95%E7%9A%84%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90
 +
        -->
 +
    </div>
 +
</body>
 +
<script type="text/javascript">
 +
new Vue({
 +
    el:'#root',
 +
    data:{
 +
        firstName:'张',
 +
        lastName:'三'
 +
    }
 +
})
 +
</script>
 +
</html>
 +
</syntaxhighlight>

2024年8月11日 (日) 08:01的版本

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=18

插值语法实现

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>姓名案例_插值语法实现</title>
    <!-- 引入 Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
     <div id="root">
        姓：<input type="text" name="" id="" v-model="firstName"><br>
        名：<input type="text" name="" id="" v-model="lastName"><br>
        姓名：<span>{{firstName}}-{{lastName}}</span><br>
        需求一：不管输入几位，只要三位：<span>{{firstName.slice(0, 3)}}-{{lastName.slice(0, 3)}}</span>
        <!-- 上面这种也可以实现，但如果要求对输入值进行更复杂的操作后再回显到页面上的情况下，这种写法就违反了官方风格指南中提到的 
         模板中简单的表达式
         https://v2.cn.vuejs.org/v2/style-guide/#%E6%A8%A1%E6%9D%BF%E4%B8%AD%E7%AE%80%E5%8D%95%E7%9A%84%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90
         -->
     </div>
</body>
<script type="text/javascript">
new Vue({
    el:'#root',
    data:{
        firstName:'张',
        lastName:'三'
    }
})
</script>
</html>
取自“https://www.jihongchang.top/index.php?title=Vue_姓名案例&oldid=8189”